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

119

我想显示一个从数据库到表单元格的段落。

结果是一个大的1行，而忽略了它在数据库中的组织方式。例如忽略“输入”（换行）

我想完全按照它在数据库中的编写方式来显示它。

例如，如果段落保存如下：

hello ,
my name is x.

我希望它完全像这样显示，而不是：

hello, myname is x.

html css tablerow

— 阴凉
source

163

您想使用white-space:pre适用于适当的CSS<td>。为此，请对所有表单元格执行此操作，例如：

td { white-space:pre }

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

PRE元素告诉可视用户代理所包含的文本是“预格式化”的。处理预格式化的文本时，可视用户代理：

可能会保留空白。

可能以固定间距字体呈现文本。

可能会禁用自动自动换行。

不得禁用双向处理。

— 佛罗兹
source

竖起大拇指，white-space是受到广泛支持的CSS 2.1属性。在IE8上测试，效果很好。

— leesei 2013年

我现在处于一种情况，white-space: pre;在<td>标签中应用该代码时会被忽略。使用<pre></pre>包装我们的内容可以很好地工作，但是由于使用了此表（导出到excel），大的列和行数使导出文件的大小膨胀，导致excel在读取文件时崩溃。（奇怪，我知道）。有没有其他人看到这个或有解决方案的主意？

— JoeBrockhaus

1

该解决方案远非完美。结果是Excel为具有换行符的单元格生成多行。唯一正确的答案可以在这里找到：bennadel.com/blog/...

— Elmue

55

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

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

— Jajikanth Pydimarla
source

1

这是一个不错的针对性解决方案。该<pre>标签除了允许使用换行符外，还可以执行所有其他操作，但是这些样式设置只能解决出现的问题。

— Moveson

我的数据包含换行符，这是一个问题。其他解决方案，例如用<br/>或<div>或<pre>替换文本，仅被视为文本。该解决方案可以很好地解决该问题。

— Anshuman Goel

太棒了!! 这对我来说很好。我有一个JDataTable列出了多个文本，我需要css正确包装文本！节省一天的时间非常感谢！

— PatsonLeaner

1

就保留换行符而言，这对我有用，但是在每个单元格的顶部都添加了换行符...有什么解决方案吗？

— jtr13

30

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

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

— 乔伊斯·巴布（Joyce Babu）
source

3

但是，这确实会用等宽字体覆盖字体。

— hardmooth

23

解决此问题的两个建议：

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

如果您的文本没有html标记或CSS属性，则这是一个很好的解决方案。例如，还允许维护选项卡。

解决方案2：替换\n为<p></p> or <br/>

如果您只想添加折线而不丢失其他文本属性或格式，则这是一种解决方案。PHP中的一个例子是$text = str_replace("\n","<br />",$database_text);

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

— 丹尼尔·维拉·波阿（Daniel Vila Boa）
source

7

在服务器端代码上，将新行（\n）替换为<br/>。

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

— 火箭危险品
source

6

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

这将产生我想要的输出。

— 香巴拉
source

5

我在每一行之后使用html代码标签（见下文），它对我有用。

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

— 雷内
source

2

它应该是评论而不是答案。

— Deep Sharma

<br>破坏了表的语义。使用基于文本的浏览器查看表时，新行显示为类似于表行。

— JAT86 '18

3

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

td { white-space:pre-line }

— Sumon Bappi
source

1

我只<br>在里面添加了<td>它，并且效果很好，打破了界限！

— 兹维
source

0

如果您\n要在其中放入一个字符串变量td，可以尝试

<td>
    {value
        .split('\n')
        .map((s, index) => (
            <React.Fragment key={index}>
                {s}
                <br />
            </React.Fragment>
        ))}
</td>

— 尤金·伊纳瑟
source