如何正确显示多行文本？

Question

我有一个带有一些不同文本行的HTML文档，有没有一些确定的正确方法来显示它们？

例子：

Here are
some lines
of text

我应该为每一行使用<p>标签，还是有其他/更好的方法？

示例：

<p>Here are</p>
<p>some lines</p>
<p>of text</p>

或者

<p>
  Here are <br>
  some lines <br>
  of text <br>
</p>

还是选择完全不同的东西？

目前CSS和其他东西并不重要，我只是想知道使用哪种方式是“最正确”的。

- Sebastian Norr

---

到目前为止，似乎我已经得到了每个答案的一个例子，分别是：示例1、示例2和没有正确的方法。那么哪一个是正确的？ - Sebastian Norr

我想我会采用第二个示例的方式，但只是因为我认为它使代码看起来更好，因为有些行太长了，所以会自动换行，这样就会让</p>标签看起来像是混在文本中，而我的观点是<br>标签更适合与文本混合使用，而不是</p>标签。 - Sebastian Norr

Answer 1

如果你想在一个 div 中显示带有换行的字符串，可以使用 white-space: pre-wrap CSS 样式：

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

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

- vir us

---

或者您可以使用：white-space: break-spaces; - Misi

Answer 2

你也可以尝试不用标签包装每一行，例如这种方法：

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

- Lerner Zhang

---

不，我更喜欢@Vir us的解决方案。它本质上是相同的解决方案，但CSS在CSS部分中定义，HTML在HTML部分中定义，这正如应该的那样。Vir Us的解决方案：https://dev59.com/w1UL5IYBdhLWcg3w1rBK#58661809 - Sebastian Norr

是的，你说得对！@SebastianNorr 但在某些情况下，这种方法更好，比如Jupyter，（尽管也可以在那里添加CSS。） - Lerner Zhang

Answer 3

正确的做法是使用为你需要的事情而制作的东西。 如果你想要一个换行（回车），请使用<br>; 如果您想定义一个段落，请使用<p>。

- D. Pardal

Answer 4

根据this，<br>元素用于插入换行符而不会开始新的段落。因此，您应该优先选择第二种解决方案而不是第一种。

w3schools提供了一篇关于样式指南和编码约定的精彩文章。

- Daniele Cappuccio

Answer 5

规范非常清楚地说明，<br>不应该被使用，除非换行符实际上是构成单个文本单位的一部分。

由于这些是不同的文本行，而不是包含换行符的单个单位，它们需要被拆分为单独的<p>元素。

- BoltClock

Answer 6

如果您想创建一个多行段落，保持代码中的换行符而不是到处添加
，只需使用html标签即可。

- Jay Racine

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 7

在大多数情况下，没有最正确的方法，至少根据您当前需求的规范来看是这样。是的，您可以将它们全部放在单独的段落中，使用<p></p>标签，或者您可以通过<br>标签在每一行上进行分隔。您还可以使用与white-space CSS属性相结合的span，因此您有很多选择。要为自己选择最佳选项，您需要尝试它们并查看哪个最符合您的要求。

- Lajos Arpad