你能让换行符 \n 显示为换行 <br /> 吗？

Question

我正在尝试使用IMAP显示电子邮件。但是，当电子邮件是文本时，换行符\n无法正常显示。我不想将它们转换为断点<br />，因为如果用户想回复该电子邮件，那么它现在将变为HTML而不是纯文本。也许有一个javascript函数可以将其显示为换行符，而不改变代码吗？

- James

Answer 1

如何处理HTML/CSS中的换行符？如果您将文本放在<pre>标签内，它将完全按照原样显示所有换行符。或者，您可以通过将CSS样式white-space: pre应用于任何元素来实现相同的效果。

不要忘记仍然需要进行HTML编码(<变为 <等)，否则它会在第一个尖括号处分裂。

- Vilx-

---

您还可以添加word-break: break-word;以保留自动换行，当行过长时。 - Anders Bornholm

更好的做法是使用white-space: pre-wrap;来实现自动换行。 - now

Answer 2

只需添加这个 white-space CSS 样式属性即可呈现多行文本：

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

然后：

<div class="multiline">
  my
  multiline
  text
</div>

现在换行符将像br元素一样呈现。

- Chtioui Malek

---

对我来说最好的答案是，在React上使用Material Ui Typography组件。 - Lucas Andrade

这么长时间？这么长时间？？！！！而我一直将它们转换为<br>… - Félix Adriyel Gagnon-Grenier

Answer 3

white-space属性在CSS中表现良好，但为了跨浏览器的兼容性

.abc {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: pre-wrap;      /* Modern browsers */
}

你的 HTML

<div class="abc">
 Lorem 
 Ipsum 
 is 
 simply 
 dummy
</div>

MDN Source

- kesh