Zeilenumbrüche in HTML sind „\n“

Question

Gibt es eine Möglichkeit, HTML dazu zu bringen, n korrekt zu verarbeiten? Oder muss ich sie durch
ersetzen?

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

Answer 1

您可以使用 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>

Answer 2

这是在 HTML 中显示换行符和回车符。那么你不需要明确地这样做。您可以在 CSS 中通过设置空白属性 pre-line 值来完成此操作。

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