\ n不是在javascript中的文本之间创建新行

Question

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

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,
    )

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

Answer 1

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

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

Answer 2

CSS！ white-space！ pre-wrap！了解它！

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




                       SPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACE!

Newlines totally work now!
</div>

Answer 3

对于innerHTML，您需要'<br />'

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
    )

Answer 4

输出到\n或\r\n文档等文本元素时，

<textarea>（或有时.txt）会有效，但<br>是必需的用于HTML。