我觉得我在问一个非常菜鸟的问题)有没有办法让HTML正确处理\n
换行符?或者我必须用<br/>
替换它们?
答案 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)
根据您的问题,可以通过各种方式完成: - 例如,您可以使用:
如果要在文本区域中插入新行,可以尝试: -
换行和
回车
<textarea>Hello 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>
代码
<div class="text">
<pre>
abc
def
ghi
</pre>
abc
def
ghi
</div>
&#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
答案 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>
innerHTML
,textContent
:要求使用样式white-space
这取决于您如何应用文本,但是有很多选择
const node = document.createElement('div');
node.innerText = '\n Test \n One '