Перенос строки в HTML с использованием '\n'

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

Для обработки переноса строки \n используйте:

white-space: pre-line;

Для обработки переноса строки \n и табуляции \t используйте:

white-space: pre-wrap;

Пример кода на JavaScript:

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';

Соответствующие стили CSS:

#just-line-break {
  white-space: pre-line;
}

#line-break-and-tab {
  white-space: pre-wrap;
}

И HTML-разметка:

<div id="just-line-break"></div>

<br/>

<div id="line-break-and-tab"></div>

Таким образом, применяя данные стили, вы сможете корректно отображать переносы строк и табуляцию в своих HTML-элементах.

Это можно сделать разными способами.

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


 (перевод строки) и 
 (возврат каретки). Использовать их можно так:

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

Также вы можете использовать тег <pre>---</pre> для предварительно отформатированного текста, как показано ниже:

<pre>
  Это строка 1
  Это строка 2
  Это строка 3
</pre>

Или можно использовать тег <p>----</p> для абзацев, как в следующем примере:

<p>Это строка 1</p>
<p>Это строка 2</p>
<p>Это строка 3</p>

Вы можете использовать тег <pre>, чтобы сохранить форматирование текста. Например:

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

В этом примере текст внутри тега <pre> будет отображаться с сохранением пробелов и переводов строк, что позволяет вам показывать текст в его оригинальном виде.

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

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

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

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

Вот пример:

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

В этом примере будет отображено значение с переносами строк, так как innerText обрабатывает \n автоматически.

Вы можете использовать это CSS-свойство:

white-space: pre-line;

Это свойство позволяет обрабатывать пробелы и переносы строк, сохраняя при этом видимость перевода строк в текстовых элементах.