HTML 中的换行符 '\n'

Line break in HTML with '\n'

提问by stkvtflw

Is there a way to make HTML properly treat \nline breaks? Or I have to replace them with <br/>?

有没有办法让 HTML 正确处理\n换行符？或者我必须用<br/>?

https://jsfiddle.net/zawyatzt/

https://jsfiddle.net/zawyatzt/

回答by khakishoiab

This is to show new line and return carriage in html, then you don't need to do it explicitly. You can do it in css by setting the white-space attribute pre-line value.

这是在html中显示新行和回车，那么你不需要明确地做。您可以通过设置 white-space 属性行前值在 css 中完成。

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

回答by Darlesson

You can use CSS white-spaceproperty for \n. You can also preserve the tabs as in \t.

您可以将 CSSwhite-space属性用于\n. 您还可以像 中那样保留选项卡\t。

For line break \n:

对于换行符\n：

white-space: pre-line;

For line break \nand tabs \t:

对于换行符\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>

回答by Sampad

As per your question, it can be done by various ways: - For example you can use:

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

If you want to insert a new line in text area , you can try this:-

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


Line Feed and 
Carriage return



换行和回车

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

You can also <pre>---</pre>Preformatted text.

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

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

Or,you can use <p>----</p>Paragraph

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

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

Note: if you want to use \nyou need to install a server like Xampp or Apache to support server side language

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

回答by Johan Br?nnmar

You could use the <pre>tag

你可以使用<pre>标签

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

回答by Ehsan

you can use <pre>tag :

你可以使用<pre>标签：

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

回答by Drenai

Using white-space: pre-lineallows you to input the text directly in the HTML with line breaks without having to use \n

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

If you use the innerTextproperty of the element via JavaScript on a non-pre element e.g. a <div>, the \nvalues will be replaced with <br>in the DOM by default

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

• innerText: replaces \nwith <br>
• innerHTML, textContent: require the use of styling white-space

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

It depends on how your applying the text, but there are a number of options

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

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

回答by Alessandro Ornano

Simple and linear:

简单线性：

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

回答by Luke

You should consider replacing your line brakes with <br/>. In HTML a line break will only stand for new line in your code.

您应该考虑用<br/>. 在 HTML 中，换行符仅代表代码中的新行。

Alternatively you can use some other HTML markups like placing your lines in paragraphs:

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

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

or other wrappers like for instance <div>sample</div>with css attribute: display: block.

或其他包装器，例如<div>sample</div>具有 css 属性：display: block.

You can also use <pre>. The content of prewill have it's html styling ignored. In other words it will display pure html with normal \nbrakelines

您也可以使用<pre>. 的内容pre将忽略它的 html 样式。换句话说，它将显示带有普通\n刹车线的纯 html