使用`\n`在html中换行

Question

我觉得我问的是一个非常菜鸟的问题)有没有办法让HTML正确处理\n换行符？或者我必须替换它们<br/>？

https://jsfiddle.net/zawyatzt/

Answer 1

这是为了在html中显示新行和返回载体,然后您不需要显式地执行它.您可以通过设置white-space属性前置行值在css中执行此操作.

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

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

Answer 3

您可以使用此 CSS 属性：

white-space: pre-line

Answer 4

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

如果要在文本区域中插入新行,可以尝试: -



换行和回车

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

您还可以<pre>---</pre>预先格式化文本.

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

或者,您可以使用<p>----</p>Paragraph

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

注意:如果要使用\n,则需要安装Xampp或Apache等服务器以支持服务器端语言

Answer 5

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

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

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

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

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

Answer 6

你可以使用<pre>标签:

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

Answer 7

您可以使用以下任意 CSS，

white-space: pre-line;

或者

white-space: pre-wrap;

或者

white-space: break-spaces;

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

Answer 8

你可以使用<pre>标签

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

Answer 9

简单线性：

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