Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >white-space

white-space

Legt fest, was der Browser mit Leerzeichen und Zeilenumbrüchen aus dem HTML-Quelltext macht und ob er den Text umbrechen darf. Standardmäßig fallen mehrere Leerzeichen und Zeilenumbrüche zu einem Leerzeichen zusammen und die Zeilen brechen nach der Breite um.

Werte

normal – Standard: Leerzeichen fallen zusammen, Zeilenumbrüche werden ignoriert, der Text bricht um.
nowrap – Leerzeichen fallen zusammen, der Text bricht aber nicht um (nur bei einem <br>).
pre – Leerzeichen und Zeilenumbrüche bleiben wie im HTML, kein Umbruch (Standard bei <pre>).
pre-wrap – wie pre, lange Zeilen brechen aber um.
pre-line – Leerzeichen fallen zusammen, Zeilenumbrüche bleiben, der Text bricht um (Text aus einem Formular, Gedichte).
break-spaces – wie pre-wrap, Leerzeichen am Zeilenende nehmen aber Platz ein und die Zeile kann nach ihnen umbrechen.

Die neuere Spezifikation hat white-space zu einer Kurzschreibweise für white-space-collapse und text-wrap-mode gemacht; die klassischen Werte funktionieren weiter.

Initialwert: normal. Vererbt: ja. Gilt für: alle Elemente.

Beispiele

Derselbe Text mit Leerzeichen und Zeilenumbrüchen im HTML:

<p class="normal">Eine Zeile   mit   Leerzeichen
und eine zweite Zeile</p>
<p class="pre-line">Eine Zeile   mit   Leerzeichen
und eine zweite Zeile</p>
<p class="pre-wrap">Eine Zeile   mit   Leerzeichen
und eine zweite Zeile</p>

p {
  max-width: 280px;
  margin: 0 0 6px;
  padding: 4px 6px;
  border: 1px dashed #999;
}
.normal { white-space: normal; }
.pre-line { white-space: pre-line; }
.pre-wrap { white-space: pre-wrap; }

Ergebnis

Eine Zeile mit Leerzeichen und eine zweite Zeile

Ein Preis, der nicht auf zwei Zeilen getrennt werden darf:

<p class="row">Preis: <span class="price">1.290 EUR</span> inklusive MwSt. und Versand innerhalb Deutschlands.</p>

.row { max-width: 200px; }
.price { white-space: nowrap; font-weight: bold; }

Ergebnis

Preis: 1.290 EUR inklusive MwSt. und Versand innerhalb Deutschlands.

Worauf Sie achten sollten

nowrap und pre können auf dem Handy seitlich überlaufen – kombinieren Sie sie mit overflow-x: auto oder text-overflow.
Für ein geschütztes Leerzeichen an einer Stelle (Zahl und Einheit, „S. 12“) ist   im HTML einfacher.
Mit Zeilenumbrüchen gespeicherten Text aus einem Formular zeigt pre-line mit seinen Zeilen an – ohne Umwandlung in <br>.
Bei textarea wird der Umbruch ebenfalls über white-space gesteuert (Standard ist pre-wrap).

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
overflow-wrap
word-break
text-overflow
text-wrap
tab-size