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 中通过设置 white-space 属性 pre-line 值来执行此操作。

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

它可以通过多种方式完成。

例如，如果要在文本区域中插入新行，可以使用以下命令：


换行和回车，使用方式如下：


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

您还可以使用预先格式化的文本，如下所示：<pre>---</pre>

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

您可以将 CSS 属性用于 。您也可以保留选项卡，如 中所示。white-space\n\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>

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

如果您通过 JavaScript 在非 pre 元素（例如 a ）上使用元素的 innerText 属性，则默认情况下，这些值将在 DOM 中替换为<div>\n<br>

• innerText：替换为\n<br>
• innerHTML，：需要使用样式textContentwhite-space

这取决于您如何应用文本，但有许多选项

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

一个不涉及 CSS 样式或数字字符引用的简单且更自然的解决方案是使用字符实体引用：



The primary colors are:
- Red
- Green
- Blue

注意：由于这被简单地定义为LF（换行符，或Unicode码位）字符，因此它是否适合需要整个CR + LF（回车符+换行符）序列的场景是值得商榷的。但是，它在我在 Windows 10 中完成的 Chrome、Edge 和 WebView2 测试中起作用，因此它应该可以安全使用。U+000A

您可以使用以下任何 CSS，

white-space: pre-line;

或

white-space: pre-wrap;

或

white-space: break-spaces;

欲了解更多信息，请阅读： https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

您可以使用以下 CSS 属性：

white-space: pre-line

\n或 或 在内部解释\t\r<pre>---</pre>

它对我有用。