Podział wiersza w HTML za pomocą „\ n”

Czy istnieje sposób, aby HTML właściwie traktował podział \nwiersza? Czy muszę je zastąpić <br/>?

https://jsfiddle.net/zawyatzt/

Ma to na celu wyświetlenie nowej linii i karetki zwrotnej w formacie HTML, więc nie musisz tego robić jawnie. Możesz to zrobić w css, ustawiając wartość przed wierszem atrybutu białych znaków.

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

Możesz użyć white-spacewłaściwości CSS dla \n. Możesz także zachować zakładki jak w \t.

Do podziału linii \n:

white-space: pre-line;

Dla podziału linii \ni tabulatorów \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>

Zgodnie z pytaniem można to zrobić na różne sposoby: - ​​Na przykład możesz użyć:

Jeśli chcesz wstawić nową linię w polu tekstowym, możesz spróbować:


Przesuw linii i 
powrót karetki

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

Możesz także <pre>---</pre>wstępnie sformatowany tekst.

<pre>
     This is Line1
     This is Line2
     This is Line3
</pre>

Lub możesz użyć <p>----</p>akapitu

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

Uwaga: jeśli chcesz użyć \n , musisz zainstalować serwer taki jak Xampp lub Apache, aby obsługiwać język po stronie serwera

Możesz użyć <pre>tagu

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

możesz użyć <pre>tagu:

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

Użycie white-space: pre-lineumożliwia wprowadzenie tekstu bezpośrednio w kodzie HTML z podziałem wiersza bez konieczności używania\n

Jeśli użyjesz innerTextwłaściwości elementu za pomocą JavaScript na nieprzygotowanym elemencie, np. A <div>, \nwartości zostaną <br>domyślnie zastąpione przez DOM

• innerText: zastępuje się \nprzez<br>
• innerHTML, textContent: wymagają użycia stylizacjiwhite-space

Zależy to od sposobu zastosowania tekstu, ale istnieje wiele opcji

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

Prosty i liniowy:

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

Powinieneś rozważyć wymianę hamulców liniowych na <br/>. W HTML podział linii będzie oznaczał tylko nową linię w kodzie.

Alternatywnie możesz użyć innych znaczników HTML, takich jak umieszczanie linii w akapitach:

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

lub inne owijki jak na przykład <div>sample</div>z atrybutem CSS display: block.

Możesz także użyć <pre>. Zawartość prebędzie ignorowana jako styl HTML. Innymi słowy, wyświetli czysty HTML z normalnymi \nukładami hamulcowymi