使用`\ n`在html中换行

时间:2016-09-05 07:08:27

标签: html

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

https://jsfiddle.net/zawyatzt/

8 个答案:

答案 0 :(得分:184)

这是为了在html中显示新的行和返回载体,然后你不需要明确地这样做。您可以通过设置空白属性前置行值来在css中执行此操作。

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

答案 1 :(得分:75)

您可以为white-space使用CSS \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>

答案 2 :(得分:14)

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

  

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

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

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

您还可以<pre>---</pre>预先格式化的文字。

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

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

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>
  

注意:如果你想使用\n,你需要安装像Xampp或Apache这样的服务器来支持服务器端语言

答案 3 :(得分:9)

您可以使用<pre>代码:

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

答案 4 :(得分:8)

您可以使用<pre>代码

&#13;
&#13;
<div class="text">
<pre>
  abc
  def
  ghi
</pre>
  abc
  def
  ghi
</div>
&#13;
&#13;
&#13;

答案 5 :(得分:3)

您应该考虑用<br/>替换线制动器。在HTML中,换行符仅代表代码中的新行。

或者,您可以使用其他一些HTML标记,例如将您的行放在段落中:

<p>Sample line</p>
<p>Another line</p>

或其他包装器,例如<div>sample</div>,其css属性为:display: block

您也可以使用<pre>pre的内容会忽略它的html样式。换句话说,它将显示带有正常\n brakelines

的纯HTML

答案 6 :(得分:1)

简单而线性:

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

答案 7 :(得分:0)

使用white-space: pre-line可让您直接在HTML中输入带有换行符的文本,而不必使用\n

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

  • innerText:将\n替换为<br>
  • innerHTMLtextContent:要求使用样式white-space

这取决于您如何应用文本,但是有很多选择

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