Есть ли способ заставить HTML правильно обрабатывать разрывы строк \n? Или мне нужно заменить их на <br/>?

https://jsfiddle.net/zawyatzt/

382
stkvtflw 5 Сен 2016 в 10:08

8 ответов

Лучший ответ

Это нужно для отображения новой строки и возврата каретки в html, тогда вам не нужно делать это явно. Вы можете сделать это в css, установив значение перед строкой атрибута white-space.

<span style="white-space: pre-line">@Model.CommentText</span>
438
khakishoiab 16 Сен 2016 в 11:02

Использование white-space: pre-line позволяет вводить текст прямо в HTML с разрывами строк без использования \n

Если вы используете свойство innerText элемента через JavaScript в элементе, отличном от pre, например a <div>, значения \n будут заменены в DOM на <br> по умолчанию

  • innerText: заменяет \n на <br>
  • innerHTML, textContent: требуется использование стиля white-space

Это зависит от того, как вы применяете текст, но есть несколько вариантов

const node = document.createElement('div');
node.innerText = '\n Test \n One '
11
Drenai 13 Дек 2018 в 09:29

Вы можете использовать свойство 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>
154
Darlesson 13 Ноя 2017 в 17:30

Просто и линейно:

 <p> my phrase is this..<br>
 the other line is this<br>
 the end is this other phrase..
 </p>
5
Alessandro Ornano 29 Авг 2018 в 17:23

Вы можете использовать тег <pre>

<div class="text">
<pre>
  abc
  def
  ghi
</pre>
  abc
  def
  ghi
</div>
15
Johan Brännmar 24 Апр 2018 в 13:24

Вы можете использовать тег <pre>:

<div class="text">
<pre>
abc
def
ghi
</pre>
</div>
12
Ehsan 5 Сен 2016 в 07:19

Вам следует подумать о замене разрывов строк на <br/>. В HTML разрыв строки будет означать только новую строку в вашем коде.

В качестве альтернативы вы можете использовать другие разметки HTML, например, размещение строк в абзацах:

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

Или другие оболочки, например <div>sample</div> с атрибутом CSS: display: block.

Вы также можете использовать <pre>. HTML-стиль содержимого pre будет игнорироваться. Другими словами, он будет отображать чистый HTML с обычными разрывами строк \n.

2
nms 31 Июл 2020 в 05:23

Согласно вашему вопросу, это можно сделать разными способами: - Например, вы можете использовать:

Если вы хотите вставить новую строку в текстовую область, вы можете попробовать следующее: -

&#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, для поддержки языка на стороне сервера.

31
Sampad 5 Сен 2016 в 07:43