在 HTML 中使用 '\n' 换行答案

【问题标题】：Line break in HTML with '\n'在 HTML 中使用 '\n' 换行
【发布时间】：2023-03-15 16:30:01
【问题描述】：

有没有办法让 HTML 正确处理 \n 换行符？或者我必须用 替换它们？

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

【问题讨论】：

标签： html

【解决方案1】：

这是为了在 HTML 中显示换行和回车，然后你不需要显式地这样做。您可以在 CSS 中通过设置 white-space 属性前行值来实现。

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

【讨论】：

如果还想保留标签空间，也可以使用white-space: pre-wrap。

【解决方案2】：

您可以将 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>

【讨论】：

这个很久了，是supported by all major browsers。

【解决方案3】：

根据您的问题，可以通过多种方式完成：- 例如，您可以使用：

如果你想在文本区域插入一个新行，你可以试试这个：-

&#10;换行和&#13;回车

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

你也可以<pre>---</pre>预格式化文本。

<pre>
     This is Line1
     This is Line2
     This is Line3
</pre>

或者，你可以使用----段落

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

【讨论】：

能否请您详细说明您的最后一条笔记？我不明白你为什么认为这需要服务器端支持......
这里的最后一句话客观上是错误的，正如其他几个答案所证明的那样。即使本机不支持它，您也可以使用客户端 JavaScript 轻松更改它。

【解决方案4】：

你可以使用<pre>标签

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

【讨论】：

【解决方案5】：

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

如果您通过 JavaScript 在非 pre 元素上使用元素的 innerText 属性，例如一个<div>，默认情况下，\n在DOM中的值将被替换为 

innerText：将\n 替换为 
innerHTML,textContent：需要使用样式white-space

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

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

【讨论】：

有趣。我偶然遇到了这个。是否有任何文档描述这一点？
这里有许多不同的概念，br 的行为取决于浏览器——因此不太可能将其描述为单个文档。我很少使用innerText，但经常使用white-space 样式

【解决方案6】：

你可以使用<pre>标签：

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

【讨论】：

【解决方案7】：

简单而线性：

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

【讨论】：

HTML 元素在文本中产生换行符（回车）。它对于写诗或地址很有用，其中行的划分很重要。这更容易。 developer.mozilla.org/en-US/docs/Web/HTML/Element/br
@DiegoLopeLoyola 我同意你的观点，但不幸的是，有时某些编译器或编程语言只接受此 HTML 标签。