Zeilenumbruch in HTML mit '\ n'

Antworten:

353

Dies dient dazu, eine neue Zeile anzuzeigen und den Wagen in HTML zurückzugeben. Dann müssen Sie dies nicht explizit tun. Sie können dies in CSS tun, indem Sie den Vorzeilenwert des Leerraumattributs festlegen.

<span style="white-space: pre-line">@Model.CommentText</span>
khakishoiab
quelle
13
Sie können auch verwenden, white-space: pre-wrapwenn Sie den Platz auf den Registerkarten beibehalten möchten.
Vijay Shegokar
124

Sie können die CSS- white-spaceEigenschaft für verwenden \n. Sie können die Registerkarten auch wie in beibehalten \t.

Für Zeilenumbruch \n:

white-space: pre-line;

Für Zeilenumbrüche \nund Tabulatoren \t:

white-space: pre-wrap;

Darlesson
quelle
Dies ist seit langem verfügbar und wird von allen gängigen Browsern unterstützt .
Darlesson
23

Gemäß Ihrer Frage kann dies auf verschiedene Arten erfolgen: - Zum Beispiel können Sie Folgendes verwenden:

Wenn Sie eine neue Zeile in den Textbereich einfügen möchten, können Sie Folgendes versuchen: -

&#10;Zeilenvorschub und &#13;Wagenrücklauf

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

Sie können auch <pre>---</pre>Text vorformatieren.

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

Oder Sie können <p>----</p>Paragraph verwenden

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

Hinweis: Wenn Sie verwenden möchten, müssen \nSie einen Server wie Xampp oder Apache installieren, um die serverseitige Sprache zu unterstützen

Sampad
quelle
5
Könnten Sie bitte Ihre letzte Notiz näher erläutern? Ich verstehe nicht, warum Sie denken, dass dafür serverseitige Unterstützung erforderlich ist ...
Shadow
Der letzte Satz hier ist objektiv falsch, wie mehrere andere Antworten gezeigt haben. Und selbst wenn es nicht nativ unterstützt würde, könnten Sie es leicht mit clientseitigem JavaScript ändern.
John Montgomery
13

Sie könnten das <pre>Tag verwenden

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

Johan Brännmar
quelle
12

Sie können <pre>tag verwenden:

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

Ehsan
quelle
5

Mit white-space: pre-linekönnen Sie den Text mit Zeilenumbrüchen direkt in den HTML-Code eingeben, ohne ihn verwenden zu müssen\n

Wenn Sie die innerTextEigenschaft des Elements über JavaScript für ein Nicht-Pre-Element verwenden, z. B. a <div>, werden die \nWerte <br>im DOM standardmäßig durch ersetzt

  • innerText: ersetzt \ndurch<br>
  • innerHTML, textContent: erfordern die Verwendung von Stylingwhite-space

Es hängt davon ab, wie Sie den Text anwenden, aber es gibt eine Reihe von Optionen

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

Einfach und linear:

 <p> my phrase is this..<br>
 the other line is this<br>
 the end is this other phrase..
 </p>
Alessandro Ornano
quelle
2

Sie sollten in Betracht ziehen, Ihre Leitungsbremsen durch zu ersetzen <br/>. In HTML steht ein Zeilenumbruch nur für eine neue Zeile in Ihrem Code.

Alternativ können Sie auch andere HTML-Markups verwenden, z. B. das Platzieren Ihrer Zeilen in Absätzen:

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

oder andere Wrapper wie zum Beispiel <div>sample</div>mit CSS-Attribut : display: block.

Sie können auch verwenden <pre>. Der Inhalt von prewird das HTML-Styling ignorieren. Mit anderen Worten, es wird reines HTML mit normalen \nBrakelines angezeigt

Luke
quelle