Html 如何在表格单元格中显示多行文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10937218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show multiline text in a table cell
提问by Shady
I want to show a paragraph from database into a table cell.
我想将数据库中的一段显示到表格单元格中。
The result is a large 1 line, ignoring how its organised in database. ignoring 'enters' for example (new lines)
结果是一个大的 1 行，忽略了它在数据库中的组织方式。例如忽略“输入”（换行）
I want to show it exactly according to how it's written in database.
我想完全按照它在数据库中的编写方式来显示它。
For example if paragraph is saved like this:
例如，如果段落是这样保存的：
hello ,
my name is x.
I want it to be showed exactly like that, instead of:
我希望它完全像那样显示，而不是：
hello, myname is x.
回答by Phrogz
You want to use the CSS white-space:preapplied to the appropriate <td>. To do this to all table cells, for example:
您想使用white-space:pre应用于适当的 CSS <td>。要对所有表格单元格执行此操作，例如：
td { white-space:pre }
Alternatively, if you can change your markup, you can use a <pre>tag around your content. By default web browsers use their user-agent stylesheet to apply the same white-space:prerule to this element.
或者，如果您可以更改标记，则可以<pre>在内容周围使用标签。默认情况下，Web 浏览器使用其用户代理样式表将相同的white-space:pre规则应用于此元素。
The PRE element tells visual user agents that the enclosed text is "preformatted". When handling preformatted text, visual user agents:
- May leave white space intact.
- May render text with a fixed-pitch font.
- May disable automatic word wrap.
- Must not disable bidirectional processing.
PRE 元素告诉可视用户代理所包含的文本是“预先格式化的”。在处理预先格式化的文本时，可视化用户代理：
- 可能会留下空白区域。
- 可以使用固定间距字体呈现文本。
- 可能会禁用自动换行。
- 不得禁用双向处理。
回答by Jajikanth pydimarla
style="white-space:pre-wrap; word-wrap:break-word"
This would solve the issue of new line. pre tag would add additional CSS than required.
这将解决新线路的问题。pre 标签会添加额外的 CSS。
回答by Joyce Babu
Wrap the content in a <pre>(pre-formatted text) tag
将内容包装在<pre>（预先格式化的文本）标签中
<pre>hello ,
my name is x.</pre>
回答by Daniel Vila Boa
Two suggestions to solving this problem:
解决这个问题的两个建议：
SOLUTION 1: <div style="white-space:pre;">{database text}</div>or <pre>{database text}</pre>
解决方案1：<div style="white-space:pre;">{database text}</div>或<pre>{database text}</pre>
This is good solution if your text has no html tags or css properties. Also allows to maintain tabs for example.
如果您的文本没有 html 标签或 css 属性，这是一个很好的解决方案。例如，还允许维护选项卡。
SOLUTION 2: Replace \nwith <p></p> or <br/>
解决方案 2：替换\n为<p></p> or <br/>
This is a solution if you would just like to add break-lines, without losing other text properties or formatting.
An example in php would be $text = str_replace("\n","<br />",$database_text);
如果您只想添加换行符而不丢失其他文本属性或格式，这是一个解决方案。php 中的一个例子是$text = str_replace("\n","<br />",$database_text);
You can also use <p></p>or <div></div>, but this requires a bit more text parsing.
您也可以使用<p></p>或<div></div>，但这需要更多的文本解析。
回答by Rocket Hazmat
回答by chumbaloo
Hi I needed to do the same thing! Don't ask why but I was generating a html using python and needed a way to loop through items in a list and have each item take on a row of its own WITHIN A SINGLE CELL of a table.
嗨，我需要做同样的事情！不要问为什么，但我正在使用 python 生成一个 html，并且需要一种方法来循环遍历列表中的项目，并使每个项目在表的单个单元格内占据一行。
I found that the br tag worked well for me. For example:
我发现 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>
This will produce the output that I wanted.
这将产生我想要的输出。
回答by Rene
I use the html code tag after each line (see below) and it works for me.
我在每一行之后使用 html 代码标记（见下文），它对我有用。
George Benson </br>123 Main Street </br>New York, Ny 12344 </br>
George Benson </br>123 Main Street </br>New York, Ny 12344 </br>
回答by Sumon Bappi
the below code works like magic to me >>
下面的代码对我来说就像魔术一样>>
td { white-space:pre-line }
回答by Zvi
I added only <br>inside the <td>and it works good, break the line!
我只<br>在里面加了<td>，效果很好，断线！
回答by Eugene Ihnatsyeu
If you have a string variable with \nin it, that you want to put inside td, you can try
如果你有一个字符串变量\n，你想放在里面td，你可以试试
<td>
{value
.split('\n')
.map((s, index) => (
<React.Fragment key={index}>
{s}
<br />
</React.Fragment>
))}
</td>
