如何在表格单元格中显示多行文本

Sha*_*ady 105 html css tablerow

我想在数据库中显示一个段落到表格单元格中.

结果是一条很大的1行,忽略了它在数据库中的组织方式.忽略'进入'例如(新线)

我想根据它在数据库中的编写方式准确地显示它.

例如,如果段落保存如下:

hello ,
my name is x.
Run Code Online (Sandbox Code Playgroud)

我希望它显示的确如此,而不是:

hello, myname is x.
Run Code Online (Sandbox Code Playgroud)

Phr*_*ogz 149

您想要使用white-space:pre适用的CSS <td>.要对所有表格单元格执行此操作,例如:

td { white-space:pre }
Run Code Online (Sandbox Code Playgroud)

或者,如果您可以更改标记,则可以<pre>在内容周围使用标记.默认情况下,Web浏览器使用其用户代理样式表将相同的white-space:pre规则应用于此元素.

PRE元素告诉可视用户代理所包含的文本是"预先格式化"的.处理预格式化文本时,可视用户代理:

  • 可以保持白色空间完整.
  • 可以使用固定间距字体渲染文本.
  • 可能会禁用自动换行.
  • 不得禁用双向处理.


Jaj*_*rla 49

style="white-space:pre-wrap; word-wrap:break-word"
Run Code Online (Sandbox Code Playgroud)

这将解决新线的问题.pre标签会添加额外的CSS.

  • 这是一个很好的、有针对性的解决方案。`&lt;pre&gt;` 标签除了允许换行符之外还可以做各种各样的事情,但这些样式设置只能解决所出现的问题。 (2认同)

Joy*_*abu 28

将内容包装在<pre>(预格式化文本)标记中

<pre>hello ,
my name is x.</pre>
Run Code Online (Sandbox Code Playgroud)

  • 但是,这确实会用等宽字体覆盖字体。 (2认同)

Dan*_*Boa 23

您有两种方法可以解决此问题.

解决方案1(<div style="white-space:pre;">{database text}</div>)

您可以将数据库endline(<pre>{database text}</pre>)的更新添加到html标记\n<p></p> or <br/>.php中的一个例子是$text = str_replace("\n","<br />",$database_text);

解决方案2(<p></p>)

使用html标签将根据需要格式化文本<div></div>,虽然这将为您提供aditional css麻烦,并且只应用于基本情况.


Roc*_*mat 7

在服务器端代码上,用新的行替换(\n)<br/>.

如果您使用的是PHP,则可以使用 nl2br()


小智 6

我在每一行之后使用 html 代码标记(见下文),它对我有用。

George Benson </br> 123 Main Street </br> New York, Ny 12344 </br>

  • 它应该是评论而不是答案。 (2认同)

Sum*_*ppi 6

下面的代码对我来说就像魔术一样>>

td { white-space:pre-line }
Run Code Online (Sandbox Code Playgroud)


chu*_*loo 5

嗨,我需要做同样的事情!不要问为什么,但是我正在使用python生成html,并且需要一种方法来遍历列表中的项目,并使每个项目在一个表的单个单元格中占据一行。

我发现br标签对我来说效果很好。例如:

<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
  <TABLE>
            <TR>
                <TD>
                    item 1 <BR>
                    item 2 <BR>
                    item 3 <BR>
                    item 4 <BR>
                </TD>
            </TR>
        </TABLE>
  </BODY>
Run Code Online (Sandbox Code Playgroud)

这将产生我想要的输出。