Розрив рядка в HTML з "\ n"

222

Чи є спосіб зробити так, щоб HTML правильно ставився до \nрозривів рядків? Або я маю їх замінити <br/>?

html

— stkvtflw
джерело

jsfiddle.net/zawyatzt/2

— shas

355

Це для того, щоб показати нову лінію та повернути карету в html, тоді не потрібно робити це явно. Ви можете зробити це в css, встановивши попереднє значення атрибута white-space.

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

— хакішояб
джерело

13

Ви також можете використовувати, white-space: pre-wrapякщо хочете також зберегти простір вкладок.

— Віджай Шегокар

124

Ви можете використовувати white-spaceвластивість CSS для \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>

Розгорніть фрагмент

— Дарлессон
джерело

Це доступно тривалий час і підтримується всіма основними браузерами .

— Дарлессон

23

Відповідно до вашого питання, це можна зробити різними способами: - Наприклад, ви можете використовувати:

Якщо ви хочете вставити новий рядок у текстову область, ви можете спробувати це: -


Подача лінії та повернення до перевезення

<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 для підтримки мови сервера

— Сампад
джерело

5

Не могли б ви детальніше розглянути свою останню записку? Я не розумію, чому ви вважаєте, що для цього потрібна підтримка сервера ...

— Shadow

Останнє речення тут об'єктивно хибне, як показали кілька інших відповідей. І навіть якщо він не підтримувався в оригінальній формі, ви можете легко змінити його на JavaScript на стороні клієнта.

— Джон Монтгомері

13

Ви можете використовувати <pre>тег

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

Розгорніть фрагмент

— Йохан Браннмар
джерело

12

ви можете використовувати <pre>тег:

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

Розгорніть фрагмент

— Есан
джерело

5

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

Якщо ви використовуєте innerTextвластивість елемента через JavaScript для не-попереднього елемента, наприклад a <div>, \nзначення будуть замінені <br>у DOM за замовчуванням

innerText: замінює \nна<br>
innerHTML, textContent: вимагають використання стайлінгуwhite-space

Це залежить від того, як ви застосовуєте текст, але існує ряд варіантів

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

— Дренай
джерело

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гальмівними лініями

— Лука
джерело