显示多行文本的正确方法是什么？

Question

Answer 1

如果您想在 div 中显示包含新行的字符串，则可以使用

white-space: pre-wrap

css 样式：

.multiline {
  white-space: pre-wrap;
}

<div class="multiline">
    A multiline text
    for demo purpose
</div>

Answer 2

或者你可以尝试this而不用标签换行每行：

<div style="white-space:pre">
Here are
some lines
of text
</div>

Answer 3

正确的做事方法是使用为你需要的东西而制作的东西。如果您想要换行（输入），请使用

<br>

；如果要定义段落，请使用

<p>

。

Answer 4

根据this，

<br>

元素用于插入换行符而不开始新段落。因此，与第一个解决方案相比，您应该更喜欢第二个解决方案。

w3schools 附带了一篇关于风格指南和编码约定的精彩文章。

Answer 5

规范非常清楚地表明，永远不要使用

<br>

由于这些是不同的文本行，而不是恰好包含换行符的单个单元，因此需要将它们拆分为单独的

<p>

元素。

Answer 6

不存在最正确的方式，至少根据您当前的需求规范。是的，您可以使用

<p></p>

标签将它们全部放在单独的段落中，或者您可以通过每行的

<br>

标签将它们分开。您还可以将

span

与空白 CSS 属性结合使用，这样您就有很多选择。要选择最适合您的选项，您需要尝试一下，看看什么最适合您的要求。

Answer 7

如果您想创建一个多行段落来保持代码中的行分隔，而不到处乱扔
。只需使用 html 标签即可。

Answer 8

使用

<pre>

标签就是您想要的：

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

“pre”代表“预格式化文本”