\n 没有在 javascript 中的文本之间创建新行答案

【问题标题】：\n is not creating a new line between text in javascript\n 没有在 javascript 中的文本之间创建新行
【发布时间】：2014-05-12 15:20:12
【问题描述】：

我有一段 JavaScript 应该更新我的 HTML 中的 a：

var StringContent = ({
    "a": 'Some String a',
    "b": 'Some string b',
    "c": 'Some string c',
});

然后我希望每个字符串 a、b、c 通过以下方式显示在新行上：

document.getElementById("overlaycontent").innerHTML = (
    StringContent.a + '\n' +
    StringContent.b + '\n' +
    StringContent.c,
    )

我现在得到的只是一行中的所有内容。如何在不添加更多 divs 的情况下在文本中创建新行？我也试过\r，但这也无济于事。我查看了文档，但它一直说要使用 \n。

【问题讨论】：

在 HTML 中，您应该使用   而不是 \n。
或者使用 class 或块元素，让 CSS 完成工作。
生成的文本会有新的行，但是，在大多数情况下，空白会被 HTML 折叠起来。这就是您看到使用  的建议的原因。您还可以在 <pre> 标签中生成内容，这些标签确实尊重空白。

【解决方案1】：

您应该将\n 替换为 ，因为innerHTML 采用HTML 字符串（在HTML 中，\n 与相邻的空格合并，但不会产生回车符，除非具有white-space:pre-wrap 样式的元素，如前所述由 MaxArt）：

document.getElementById("overlaycontent").innerHTML = (
    StringContent.a + '<br>' +
    StringContent.b + '<br>' +
    StringContent.c,
)

【讨论】：

【解决方案2】：

CSS！ white-space！ pre-wrap！了解一下！

<div style="white-space: pre-wrap">




                       SPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACE!

Newlines totally work now!
</div>

【讨论】：

【解决方案3】：

对于innerHTML，您需要' '

document.getElementById("overlaycontent").innerHTML = (
    StringContent.a + '<br />' +
    StringContent.b + '<br />' +
    StringContent.c
    )

但是对于警报，您可以使用：String.fromCharCode(10) 而不是 '\n'

alert(
    StringContent.a + String.fromCharCode(10) +
    StringContent.b + String.fromCharCode(10) +
    StringContent.c
    )

【讨论】：

【解决方案4】：

\n（或有时\r\n）在输出到诸如<textarea> 或.txt 文档之类的文本元素时会起作用，但HTML 需要 。

【讨论】：