Ausführbare HTML-Docs: Zeilenumbruch

Q: Wie mache ich einen Zeilenumbruch in HTML?

Setz an die Stelle, an der die neue Zeile beginnen soll: Line one Line two. Enter in deiner HTML-Datei zu drücken funktioniert nicht, weil Browser Zeilenumbrüche im Quelltext als normale Leerzeichen behandeln.

Q: Wann nehme ich statt ?

Nimm , wenn der Zeilenumbruch zum Inhalt selbst gehört, etwa in einer Adresse oder einem Gedicht. Für getrennte Absätze nimmst du einzelne -Elemente und für Abstände CSS-margin, statt -Tags zu stapeln.

Q: Wie übernehme ich die Zeilenumbrüche eines Textes, ohne -Tags einzufügen?

Gib dem Element im CSS white-space: pre-line. Der Browser zeigt dann jeden Zeilenumbruch im Text als neue Zeile an und fasst überzählige Leerzeichen trotzdem zusammen. Das ist praktisch für Nutzerkommentare und Text, der per JavaScript geladen wird.

Q: Wie verhindere ich einen Zeilenumbruch in HTML?

Setz den Text in ein Element mit white-space: nowrap oder verbinde zwei Wörter mit einem geschützten Leerzeichen , damit sie immer in derselben Zeile bleiben.

So fügst du einen Zeilenumbruch ein

Setz   dorthin, wo die neue Zeile beginnen soll. Es ist ein Void-Element, hat also kein schließendes Tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line break</title>
</head>
<body>
  <p>
    Coddy Ltd.<br>
    12 Market Street<br>
    Springfield
  </p>
  <p>Pressing Enter in the source
     does not break the line.</p>
</body>
</html>

Die Adresse bricht genau an jedem   um. Der zweite Absatz bleibt in einer Zeile, obwohl der Quelltext einen Zeilenumbruch enthält: HTML behandelt Zeilenumbrüche, Tabs und mehrere Leerzeichen hintereinander als ein einziges Leerzeichen. Genau deshalb gibt es  .

 ,   und   erzeugen alle dasselbe Element. Nimm die Variante, die dein Projekt verwendet (JSX und XHTML verlangen den Schrägstrich).

br vs. p: Umbrüche sind keine Abstände

Ein   beendet eine Zeile innerhalb desselben Absatzes. Ein neues  beginnt einen neuen Absatz, mit Abstand darüber und darunter durch die Standard-margins.  -Tags zu stapeln, um Platz zu schaffen, funktioniert zwar, ist aber fragil und sagt inhaltlich das Falsche:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>br vs p</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { border: 2px solid #e5e7eb; padding: 0 12px; margin-bottom: 12px; }
    .spaced p { margin: 0 0 24px; }
  </style>
</head>
<body>
  <div class="box">
    <p>With br tags:<br><br><br>Second paragraph?</p>
  </div>
  <div class="box spaced">
    <p>With two paragraphs and CSS margin:</p>
    <p>Second paragraph.</p>
  </div>
</body>
</html>

Beide Kästen sehen ähnlich aus, aber der erste ist für einen Screenreader ein einziger Absatz, und wer den Abstand ändern will, muss jede Seite bearbeiten. Im zweiten ist die Lücke eine Zeile CSS.

Gute Einsätze für  : Adressen, Gedichte und Liedtexte sowie Zeilen in einer Signatur, also überall dort, wo der Umbruch zum Text gehört. Für alles andere nimmst du Absätze, Listen oder Überschriften.

Zeilenumbrüche aus deinem Text übernehmen

Wenn Text von woanders kommt (aus einem Kommentarfeld, einer Datenbank, einem Skript), enthält er echte Zeilenumbruchzeichen statt  -Tags. Mit der CSS-Eigenschaft white-space: pre-line zeigt der Browser diese Zeilenumbrüche als neue Zeilen an:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pre-line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .msg { border: 2px solid #e5e7eb; padding: 8px 12px; margin-bottom: 8px; }
    .keep { white-space: pre-line; border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="msg" id="a"></div>
  <div class="msg keep" id="b"></div>
  <script>
    const text = 'Hi team,\nThe build is fixed.\nThanks!';
    document.getElementById('a').textContent = text;
    document.getElementById('b').textContent = text;
  </script>
</body>
</html>

Derselbe String steht im grauen Kasten in einer Zeile und im blauen in drei Zeilen. Das ist außerdem sicherer, als  -Tags per innerHTML in Nutzertext einzubauen, womit Nutzer HTML einschleusen könnten. Um auch Leerzeichen und Einrückung zu erhalten, nimm white-space: pre; das erklärt die Seite zu Leerzeichen in HTML.

Lange Wörter umbrechen lassen: wbr

Ein langes Wort oder eine URL ohne Leerzeichen kann aus einem schmalen Kasten herauslaufen.  markiert eine Stelle, an der der Browser die Zeile umbrechen darf, wenn es nötig ist, und bewirkt sonst nichts:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wbr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 160px; border: 2px solid #f59e0b; padding: 4px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <div class="narrow">example.com/docs/html/line-break-tag</div>
  <div class="narrow">example.com/<wbr>docs/<wbr>html/<wbr>line-break-tag</div>
</body>
</html>

Der erste Pfad läuft aus seinem Kasten heraus; der zweite bricht an den -Stellen um. Bei Text, den du nicht kontrollierst, bricht die CSS-Eigenschaft overflow-wrap: anywhere lange Wörter stattdessen an beliebiger Stelle um.

Einen Zeilenumbruch verhindern

Manchmal willst du das Gegenteil: „10 km“ oder eine Telefonnummer zusammenhalten. Dafür gibt es zwei Werkzeuge:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No break</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 170px; border: 2px solid #16a34a; padding: 4px; }
    .nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <p class="narrow">The race is exactly 10&nbsp;km long, call <span class="nowrap">+1 555 0100</span> to join.</p>
</body>
</html>

  ist ein Leerzeichen, an dem der Browser nicht umbricht, also bleiben „10“ und „km“ zusammen. white-space: nowrap hält ein ganzes span in einer Zeile. Ersetze   durch ein normales Leerzeichen oder entferne die Klasse, und bei dieser Breite verteilt sich beides auf zwei Zeilen.

Häufige Fehler

Im Quelltext Enter drücken und eine neue Zeile erwarten. Zeilenumbrüche sind in HTML Leerzeichen. Nimm  , getrennte Elemente oder white-space: pre-line.
  für Abstände stapeln. Nimm Absätze und margin.
Eine Liste mit   bauen. Nimm <ul> oder <ol> mit <li>, die Screenreader als Liste ansagen.
 schreiben. Das ist ungültig. Schreib  .
  per innerHTML in Nutzertext einfügen. Setz stattdessen textContent und nimm white-space: pre-line.

Häufig gestellte Fragen

Wie mache ich einen Zeilenumbruch in HTML?

Setz   an die Stelle, an der die neue Zeile beginnen soll: Line one Line two. Enter in deiner HTML-Datei zu drücken funktioniert nicht, weil Browser Zeilenumbrüche im Quelltext als normale Leerzeichen behandeln.

Schreibe ich , oder ?

Alle drei funktionieren in HTML und erzeugen dasselbe Element.   ist die reine HTML-Form; die Varianten mit Schrägstrich werden aus Kompatibilität mit XHTML und JSX akzeptiert.  allein ist ungültig, auch wenn Browser es als weiteren Zeilenumbruch lesen.

Wann nehme ich statt ?

Nimm  , wenn der Zeilenumbruch zum Inhalt selbst gehört, etwa in einer Adresse oder einem Gedicht. Für getrennte Absätze nimmst du einzelne -Elemente und für Abstände CSS-margin, statt  -Tags zu stapeln.

Wie übernehme ich die Zeilenumbrüche eines Textes, ohne -Tags einzufügen?

Gib dem Element im CSS white-space: pre-line. Der Browser zeigt dann jeden Zeilenumbruch im Text als neue Zeile an und fasst überzählige Leerzeichen trotzdem zusammen. Das ist praktisch für Nutzerkommentare und Text, der per JavaScript geladen wird.

Wie verhindere ich einen Zeilenumbruch in HTML?

Setz den Text in ein Element mit white-space: nowrap oder verbinde zwei Wörter mit einem geschützten Leerzeichen  , damit sie immer in derselben Zeile bleiben.

Verwandte Konzepte