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

Question

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

159

我想将数据库中的段落展示到表格单元格中。结果是一行很长，忽略了在数据库中的组织方式。例如忽略换行符（新行）。我希望按照从数据库中读取的原样显示它。例如，如果段落是这样保存的：

hello ,
my name is x.

我希望它能像那样准确地显示，而不是：

hello, myname is x.

- Shady

16个回答

84

style="white-space:pre-wrap; word-wrap:break-word"

这将解决换行的问题。 pre标签会添加比所需更多的CSS。

- Jajikanth pydimarla

2

这是一个不错的、有针对性的解决方案。<pre> 标签除了允许换行字符外，还可以做很多其他事情，但这些样式设置仅解决了所提出的问题。 - moveson

我遇到了一个问题，我的数据中包含换行符。其他解决方案，如用 <br/>、<div> 或 <pre> 替换文本，只被视为文本。这个解决方案完美地解决了这个问题。 - leocrimson

太棒了！这对我非常有效。我有一个列出多个文本的 JDataTable，我需要你的 CSS 来正确地换行文本！节省了一天的时间，非常感谢！ - PatsonLeaner

1

这对我来说可以保留换行符，但会在每个单元格顶部添加一个换行符...有什么解决办法吗？ - jtr13

我非常想给你的答案点赞，但是它目前还停留在69个赞... - JOSEPH Blessingh

37

将内容包裹在 <pre>（预格式化文本）标签中。

<pre>hello ,
my name is x.</pre>

- Joyce Babu

5

然而，这会用等宽字体覆盖原来的字体。 - hardmooth

31

解决此问题的两个建议：

解决方案1：如果您的文本中没有HTML标签或CSS属性，可以使用以下方法：<div style="white-space:pre;">{数据库文本}</div> 或 <pre>{数据库文本}</pre>。还可以保留制表符等。

解决方案2：使用\n替换<p></p>或<br/>以添加换行符，而不会丢失其他文本属性或格式设置。 PHP示例代码如下：$text = str_replace("\n","<br />",$database_text);

您也可以使用<p></p>或<div></div>，但这需要进行更多的文本解析。

- Daniel Vila Boa

17

以下代码对我来说就像魔法一样 >>

td { white-space:pre-line }

- Sumon Bappi

13

嗨，我也需要做同样的事情！不要问为什么，但我正在使用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>

这将产生我想要的输出。

- chumbaloo

9

在您的服务器端代码中，将换行符（\n）替换为<br/>。

如果您使用的是PHP，则可以使用nl2br()函数。

- gen_Eric

6

我在每行后使用html的code标签（如下所示），这对我很有效。

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

- Rene

3

应该是评论而不是答案。 - Deep Sharma

<br>破坏了表格的语义。当使用基于文本的浏览器查看表格时，换行符会显示为类似于表格行的形式。 - JAT86

4

我只在<td>标签内添加了<br>标签，它能正常工作，并且换行了！

- Zvi

2

对于我的情况，我可以像这样使用。

td { white-space:pre-line , word-break: break-all}

- Zhong Ri

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phrogz · Accepted Answer

您希望使用CSS white-space:pre 应用于适当的 <td>。例如，要将此应用于所有表单元格，请执行以下操作：

td { white-space:pre }

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

PRE元素告诉视觉用户代理封装的文本是“预格式化”的。在处理预格式化文本时，视觉用户代理：

可能保留空格不变。

可能使用等宽字体呈现文本。

可能禁用自动换行。

不能禁用双向处理。