Разрыв строки в HTML с помощью '\ n'

Ответы:

356

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

<span style="white-space: pre-line">@Model.CommentText</span>
khakishoiab
источник
13
Вы также можете использовать, white-space: pre-wrapесли хотите сохранить вкладки также.
Виджай Шегокар
125

Вы можете использовать white-spaceсвойство CSS для \n. Вы также можете сохранить вкладки, как в \t.

Для разрыва строки \n:

white-space: pre-line;

Для разрыва строки \nи вкладок \t:

white-space: pre-wrap;

Darlesson
источник
Это доступно в течение длительного времени и поддерживается всеми основными браузерами .
Дарлессон
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, для поддержки языка на стороне сервера

Sampad
источник
5
Не могли бы вы рассказать о вашей последней заметке? Я не понимаю, почему вы думаете, что для этого требуется поддержка на стороне сервера ...
Shadow
Последнее предложение здесь объективно неверно, как продемонстрировали несколько других ответов. И даже если он не поддерживается изначально, вы можете легко изменить его с помощью клиентского JavaScript.
Джон Монтгомери
14

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

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

Йохан Браннмар
источник
5

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

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

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

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

const node = document.createElement('div');
node.innerText = '\n Test \n One '
Drenai
источник
4

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

 <p> my phrase is this..<br>
 the other line is this<br>
 the end is this other phrase..
 </p>
Алессандро Орнано
источник
2

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

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

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

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

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

Люк
источник