143

我想将数据库中的一段显示到表格单元格中。

结果是大的 1 行，忽略它在数据库中的组织方式。例如忽略“进入”（新行）

我想完全根据它在数据库中的写入方式来展示它。

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

hello ,
my name is x.

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

hello, myname is x.
4

11 回答 11

196

您要使用的 CSSwhite-space:pre应用到适当的<td>. 要对所有表格单元格执行此操作，例如：

td { white-space:pre }

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

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

  • 可能会留下完整的空白。
  • 可以使用固定间距字体渲染文本。
  • 可以禁用自动换行。
  • 不得禁用双向处理。
于 2012-06-07T18:00:36.607 回答
72 
style="white-space:pre-wrap; word-wrap:break-word"

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

于 2015-05-01T23:01:24.410 回答
33

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

<pre>hello ,
my name is x.</pre>
于 2012-06-07T18:00:34.373 回答
30

解决这个问题的两个建议：

解决方案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>or <div></div>，但这需要更多的文本解析。

于 2012-06-07T18:05:04.713 回答
11

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

这将产生我想要的输出。

于 2016-05-26T10:01:08.953 回答
10

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

td { white-space:pre-line }
于 2019-04-25T05:55:28.700 回答
8

在您的服务器端代码中，将新行 ( \n)替换为<br/>.

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

于 2012-06-07T18:00:42.627 回答
7

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

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

于 2013-11-04T13:39:38.360 回答
4

我只<br>在里面添加了<td>，效果很好，断线！

于 2019-03-24T17:16:36.387 回答
2

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

td { white-space:pre-line , word-break: break-all}
于 2020-10-22T09:54:40.800 回答
1

如果你有一个字符串变量\n，你想把它放在里面td，你可以试试

<td>
    {value
        .split('\n')
        .map((s, index) => (
            <React.Fragment key={index}>
                {s}
                <br />
            </React.Fragment>
        ))}
</td>
于 2020-05-16T07:01:01.963 回答