Ответ 1
Это показать новую строку и вернуть карету в html, тогда вам не нужно делать это явно. Вы можете сделать это в css, установив предварительное значение атрибута пробела.
<span style="white-space: pre-line">@Model.CommentText</span>
Я чувствую, что задаю очень нубский вопрос) Есть ли способ заставить HTML правильно обрабатывать \n
разрывы строк? Или я должен заменить их на <br/>
?
https://jsfiddle.net/zawyatzt/
Это показать новую строку и вернуть карету в html, тогда вам не нужно делать это явно. Вы можете сделать это в css, установив предварительное значение атрибута пробела.
<span style="white-space: pre-line">@Model.CommentText</span>
Свойство 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>
В соответствии с вашим вопросом это можно сделать различными способами: Например, вы можете использовать:
Если вы хотите вставить новую строку в текстовую область, вы можете попробовать следующее: -
Линейный канал и
Возврат каретки
<textarea>Hello 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, для поддержки языка на стороне сервера.
вы можете использовать тег <pre>
:
<div class="text">
<pre>
abc
def
ghi
</pre>
</div>
Вы можете использовать <pre>
<div class="text">
<pre>
abc
def
ghi
</pre>
abc
def
ghi
</div>
Вам следует подумать о замене линейных тормозов на <br/>
. В HTML разрыв строки будет означать только новую строку в вашем коде.
В качестве альтернативы вы можете использовать некоторые другие HTML-разметки, такие как размещение строк в абзацах:
<p>Sample line</p>
<p>Another line</p>
или другие оболочки, такие как, например, <div>sample</div>
с атрибутом css: display: block
.
Вы также можете использовать <pre>
. Содержимое pre
будет игнорировать стиль html. Другими словами, он будет отображать чистый HTML с нормальными тормозными линиями \n
Простой и линейный:
<p> my phrase is this..<br>
the other line is this<br>
the end is this other phrase..
</p>
'\n' не работает в HTML, однако вы можете использовать его при использовании JavaScript в составе HTML. Поскольку вы используете только HTML, предварительный тег может быть полезен. Он отображает ваш текст точно, как вы его набрали, т.е. Также учитываются разрывы строк и пробелы. Но у него есть и несколько недостатков. Таким образом, ваш лучший вариант - использовать ярлык br.
Надеюсь, это ответит на ваши вопросы.:)
Использование 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'