使用css pre-wrap还是br标签？

Question

我想知道使用<br>与CSS的white-space:pre-wrap相比是否有任何优点。

大多数网站在评论部分和其他用户编写的部分使用<br>作为换行符，而不是使用pre-wrap。我想知道这样做有什么好处，因为pre-wrap似乎更容易实现，允许用户自己设置行间距等等；这对我来说似乎会提供更好的用户体验。

唯一的缺点似乎是非常旧的浏览器（IE 7-），但由于其使用率和支持率现在非常低，因此已经被遗忘了，这些浏览器不完全支持white-space。

- Alex

Answer 1

对我个人而言，使用white-space: pre-wrap的缺点是无法考虑到额外的空格/制表符，而HTML通常会将多个空格视为单个空格。这有时可能很丑陋，并且它使UI开发人员对评论部分（例如）的外观控制更少，因为用户输入是不确定的。

请查看Codepen以了解事情如何混乱，注意单词之间的空格可能出现在新行的开头，以及一个空格可能占据整个行。

我个人更喜欢坚持传统的<br />方式，因为它允许我更好地控制内容以期望的方式显示。

- Irvin Lim

---

pre-wrap实际上可以保留空白。请看http://www.w3schools.com/cssref/pr_text_white-space.asp - user1263254

@PHClaus 是的，它确实可以，但这可能不是你想要做的事情。如果你是在比较br和pre-wrap来显示评论部分（正如OP所提到的），那么这可能不是你想要的。 - Irvin Lim

我在自己的网站评论中使用它，效果非常好。按照良好的风格，你会发现很多人建议放弃br标签，转而使用css。我倾向于完全避免使用br标签，而是使用div代替。不过这只是个人口味问题，仅供参考。 - user1263254

假设对于评论区，一个人不会“意外地”输入20个空格，我曾经看到有人试图使用空格制作文本艺术，但由于常规的空格属性而失败。说实话，这似乎是一件好事，让用户更加掌控他们的帖子外观。 - Alex

Answer 2

我有一个情况，其中我列出了几个名称/值对，用换行符分隔。

• 重新设计的pre（以在新行上显示每个名称/值对）
• 确保名称/值对不是html并使用
  
• 使用white-space:pre-wrap

在这种情况下，最少的工作是css选项。

我猜，为什么在野外有那么多带有
的解决方案，是因为曾经不存在它，而且很容易坚持一次发明的轮子。

- Herbert Van-Vliet