HTML中的换行符'\n'

小开

你可以使用<pre>标记

<div class="text">
<pre>
abc
def
ghi
</pre>
abc
def
ghi
</div>

小开

你可以使用<pre>标签:

<div class="text">
<pre>
abc
def
ghi
</pre>
</div>

小开

最佳答案

这是为了在HTML中显示新行和返回回车，那么你不需要显式地这样做。你可以在CSS中通过设置空白属性行前值来做到这一点。

<span style="white-space: pre-line">@Model.CommentText</span>

小开

根据你的问题，可以通过多种方式来实现。

例如，如果你想在文本区域中插入一个新行，你可以使用这些:


换行和回车，像这样使用:

<textarea>Hello &#10;&#13;Stackoverflow</textarea>

You can also use <pre>---</pre> preformatted text like this:

<pre>
This is line 1
This is line 2
This is line 3
</pre>

或者你可以像这样使用<p>----</p>段落标记:


<p>This is line 1</p>
<p>This is line 2</p>
<p>This is line 3</p>

小开

你可以为\n使用CSS的white-space属性。你也可以保留\t中的制表符。

对于换行符\n:

white-space: pre-line;

对于换行符\n和制表符\t:

white-space: pre-wrap;

document.getElementById('just-line-break').innerHTML = 'Testing 1\nTesting 2\n\tNo tab';


document.getElementById('line-break-and-tab').innerHTML = 'Testing 1\nTesting 2\n\tWith tab';

#just-line-break {
white-space: pre-line;
}


#line-break-and-tab {
white-space: pre-wrap;
}

<div id="just-line-break"></div>


<br/>


<div id="line-break-and-tab"></div>

小开

简单而线性:

 <p> my phrase is this..<br>
the other line is this<br>
the end is this other phrase..
</p>

小开

使用white-space: pre-line允许你直接在HTML中输入带有换行符的文本，而不必使用\n

如果你通过JavaScript在非前置元素(例如<div>)上使用元素的innerText属性，那么默认情况下，DOM中的\n值将被<br>替换

innerText:用<br>替换\n
innerHTML， textContent:需要使用样式white-space

这取决于你如何应用文本，但有很多选择

const node = document.createElement('div');
node.innerText = '\n Test \n One '

小开

一个简单而更自然的解决方案是使用&NewLine;字符实体引用，它不涉及CSS样式或像
这样的数字字符引用:

The primary colors are:&NewLine;- Red&NewLine;- Green&NewLine;- Blue

请注意:因为它被简单地定义为LF(换行，或U+000A Unicode码位)字符，所以它是否适合需要整个CR + LF(回车+换行)序列的场景是有争议的。但后来，它在我在Windows 10下进行的Chrome、Edge和WebView2测试中都能运行，所以应该可以安全使用。

小开

您可以使用以下任何CSS，

white-space: pre-line;

或

white-space: pre-wrap;

或

white-space: break-spaces;

小开

你可以使用CSS属性

white-space: pre-line