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

我希望将一个段落从数据库显示到一个表单元格中。

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

我想根据它在数据库中的书写方式来准确地显示它。

例如，如果段落是这样保存的:

hello ,
my name is x.

我希望它能像这样展示，而不是:

hello, myname is x.
355926 次浏览
小开

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

<pre>hello ,
my name is x.</pre>
小开
最佳答案

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

td { white-space:pre }

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

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

  • 可能会留下完整的空白。
  • 可以使用固定间距的字体呈现文本。
  • 可能会禁用自动换行。
  • 不能禁用双向处理。
小开

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

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

小开

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

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

如果您的文本没有 html 标记或 css 属性，这是一个很好的解决方案。还允许维护制表符，例如。

解决方案2: 用 <p></p> or <br/>代替 \n

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

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

小开

我在每行之后使用 html 代码标签(见下文) ，它对我很有用。

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

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

这将解决新线的问题。 Pre 标记将添加比所需要的更多的 CSS。

小开

嗨，我需要做同样的事情！不要问为什么，但我正在生成一个 HTML 使用 python，需要一种方法来循环通过一个列表中的项目，并有每个项目采取自己的一行在一个单元格的表。

我发现 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>

这将产生我想要的输出。

小开

我只添加了 <br>内的 <td>和它的工作良好，打破线！

小开

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

td { white-space:pre-line }
小开

如果有一个字符串变量，其中包含 \n，那么可以尝试将其放入 td中

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

对我来说，我可以用这个。

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

我发现了很多，但他们都不为我工作。如果您从数据库中检索到一个长文本，并将其放在表中，但只想进行前端样式设置，以将单词中断到新行。

对于我的案子，white-space: break-spaces;为我工作

小开

如果你只使用 HTML，你可以使用 \n or <br> or <pre>任何标签 但是如果你正在做 CRUD 操作

在我的例子中，我使用 Jquery 来创建和更新‘ td.html()’并检索‘ td.html(input)’。”

小开

为 td添加一个名为 white-space:nowrap的新 CSS 规则。

td { white-space:nowrap }

提交答案