Разрыв строки в html с `\n`

Я чувствую, что задаю очень нубский вопрос) Есть ли способ заставить HTML правильно обрабатывать \n разрывы строк? Или я должен заменить их на <br/>?

https://jsfiddle.net/zawyatzt/

Ответы

Ответ 1

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

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

Ответ 2

Свойство 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>

Ответ 3

В соответствии с вашим вопросом это можно сделать различными способами: Например, вы можете использовать:

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

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

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

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

Ответ 7

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

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

Ответ 8

'\n' не работает в HTML, однако вы можете использовать его при использовании JavaScript в составе HTML. Поскольку вы используете только HTML, предварительный тег может быть полезен. Он отображает ваш текст точно, как вы его набрали, т.е. Также учитываются разрывы строк и пробелы. Но у него есть и несколько недостатков. Таким образом, ваш лучший вариант - использовать ярлык br.

Надеюсь, это ответит на ваши вопросы.:)

Ответ 9

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

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

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

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