white-space

white-space bestimmt, wie ein Element mit Leerzeichen, Tabs und Zeilenumbrüchen im Quelltext umgeht. Im Normalfall fasst der Browser mehrere Leerzeichen zu einem zusammen und bricht Text automatisch am Ende einer Zeile um. Mit white-space kannst du dieses Verhalten gezielt ändern. Die Eigenschaft ist besonders nützlich für Code-Blöcke, einzeilige Labels und überall dort, wo du die volle Kontrolle über die Textformatierung brauchst.

Steckbrief white-space

Syntax: white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces
Initialwert: normal
Vererbt: Ja
Animierbar: Nein

Kategorie: Typografie
Werte: 7
Beispiele: 4
Browser: 5 von 5
E-Mail: 3 von 5
Stand: 03.07.2026

Grundlagen

Im HTML-Quelltext kannst du beliebig viele Leerzeichen und Zeilenumbrüche einfügen. Standardmäßig (white-space: normal) behandelt der Browser sie alle gleich: Mehrere Leerzeichen werden zu einem einzigen zusammengefasst, Zeilenumbrüche im Quelltext werden ignoriert und der Text bricht automatisch um, wenn er das Ende des Containers erreicht.

pre bewahrt alle Leerzeichen und Zeilenumbrüche aus dem Quelltext, genau wie das HTML-Element <pre>. Der Text bricht dabei nicht automatisch um, sondern läuft über den Container hinaus. Das ist ideal für Code-Darstellung, aber für Fließtext ungeeignet.

pre-wrap ist in der Praxis die nützlichste Variante: Es bewahrt Leerzeichen und Zeilenumbrüche, bricht den Text aber trotzdem automatisch am Zeilenende um. pre-line ist ein Kompromiss: Es fasst Leerzeichen zusammen (wie normal), bewahrt aber Zeilenumbrüche aus dem Quelltext. nowrap verhindert jeglichen automatischen Zeilenumbruch und lässt den Text in einer einzigen Zeile laufen.

white-space regelt dabei nur, was mit den Leerzeichen passiert und ob der Text überhaupt umbricht. Wie der Browser die Umbruchstellen verteilt, zum Beispiel mit ausgeglichenen Zeilenlängen für Überschriften oder schöneren Umbrüchen im Fließtext, steuerst du mit der Eigenschaft text-wrap.

Syntax & Werte

7 Werte

Wert	Beschreibung	Beispiel
`normal`	Leerzeichen werden zusammengefasst, Zeilenumbrüche ignoriert. Text bricht automatisch um.	white-space: normal
`nowrap`	Wie normal, aber der Text bricht nicht automatisch um. Läuft in einer Zeile weiter.	white-space: nowrap
`pre`	Alle Leerzeichen und Zeilenumbrüche bleiben erhalten. Kein automatischer Umbruch.	white-space: pre
`pre-wrap`	Alle Leerzeichen und Zeilenumbrüche bleiben erhalten. Text bricht zusätzlich automatisch um.	white-space: pre-wrap
`pre-line`	Leerzeichen werden zusammengefasst, Zeilenumbrüche bleiben erhalten. Text bricht automatisch um.	white-space: pre-line
`break-spaces`	Wie pre-wrap, aber Leerzeichen am Zeilenende erzeugen einen Umbruch statt zu hängen.	white-space: break-spaces
`inherit`	Erbt den Wert explizit vom Elternelement.	white-space: inherit

Beispiele

4 Beispiele

Der gleiche Text mit verschiedenen white-space-Werten. Beachte, wie sich Leerzeichen, Zeilenumbrüche und automatischer Umbruch unterscheiden.

white-space Werte im Vergleich

.normal   { white-space: normal; }
.nowrap   { white-space: nowrap; }
.pre      { white-space: pre; }
.pre-wrap { white-space: pre-wrap; }
.pre-line { white-space: pre-line; }

<div class="ws-demo">
<div class="ws-normal"><div class="label">normal</div>Mehrere    Leerzeichen    und
Zeilenumbrüche     werden zusammengefasst.</div>
<div class="ws-nowrap"><div class="label">nowrap</div>Dieser Text bricht nicht um, egal wie lang er ist. Er läuft einfach weiter und weiter.</div>
<div class="ws-pre"><div class="label">pre</div>Leerzeichen    bleiben
erhalten.    Kein
automatischer    Umbruch.</div>
<div class="ws-prewrap"><div class="label">pre-wrap</div>Leerzeichen    bleiben
erhalten.    Text bricht aber automatisch am Zeilenende um wenn er zu lang wird.</div>
<div class="ws-preline"><div class="label">pre-line</div>Leerzeichen    werden zusammengefasst.
Zeilenumbrüche bleiben aber erhalten.</div>
</div>

Das bekannteste Anwendungsmuster von white-space: nowrap: In Kombination mit overflow: hidden und text-overflow: ellipsis schneidest du überlangen Text mit drei Punkten ab. Das funktioniert nur, wenn alle drei Eigenschaften zusammen gesetzt werden.

Einzeiliger Text mit Ellipsis

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="ellipsis-demo">
<div class="el-without"><div class="label">Ohne nowrap (bricht um)</div>Ein langer Artikel-Titel der normalerweise in die nächste Zeile umbrechen würde</div>
<div class="el-with"><div class="label">Mit Ellipsis-Pattern</div>Ein langer Artikel-Titel der normalerweise in die nächste Zeile umbrechen würde</div>
</div>

pre-wrap ist ideal für Code-Darstellungen, bei denen du die Einrückung bewahren willst, aber trotzdem einen automatischen Umbruch bei langen Zeilen brauchst.

Code-Block mit pre-wrap

pre {
  white-space: pre-wrap;   /* Einrückung bewahren, am Rand umbrechen */
  word-break: break-all;   /* Lange Strings umbrechen */
  font-family: monospace;
}

<div class="code-demo">
<div class="label">white-space: pre-wrap (Code bricht am Rand um)</div>
<pre>function greet(name) {
const message = "Hallo " + name + ", willkommen auf unserer Website!";
console.log(message);
return message;
}</pre>
</div>

nowrap stellt sicher, dass Labels und Badges immer einzeilig bleiben, egal wie eng der verfügbare Platz ist.

Einzeilige Badges mit nowrap

.badge {
  white-space: nowrap;  /* Nie umbrechen */
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

<div class="badge-demo">
<span class="b-blue">Neue Funktion</span>
<span class="b-green">Veröffentlicht</span>
<span class="b-amber">In Bearbeitung</span>
<span class="b-red">Kritischer Fehler</span>
</div>

Barrierefreiheit

white-space: nowrap kann dazu führen, dass Text über den sichtbaren Bereich hinausläuft, wenn der Container zu schmal ist. Nutzer mit Bildschirmvergrößerung sehen dann nur einen Teil des Textes, ohne scrollen zu können. Verwende nowrap deshalb nur für kurze Inhalte wie Labels, Badges oder Navigationselemente, nie für längere Texte.

Für Screenreader macht der white-space-Wert keinen Unterschied, da assistive Technologien den sichtbaren Text vorlesen, unabhängig von der Darstellung. Trotzdem ist es wichtig, dass der gesamte Text für alle Nutzer zugänglich bleibt. Wenn du nowrap mit overflow: hidden kombinierst, wird der versteckte Text zwar vorgelesen, aber sehende Nutzer von assistiven Technologien können ihn nicht visuell verfolgen.

Bei Code-Blöcken mit pre oder pre-wrap solltest du den Container scrollbar machen (overflow: auto), damit längere Zeilen nicht einfach abgeschnitten werden. So können alle Nutzer den vollständigen Code einsehen.

Häufige Fehler

5 Fehler

01 Ellipsis ohne nowrap

text-overflow: ellipsis funktioniert nur zusammen mit white-space: nowrap und overflow: hidden. Fehlt eine der drei Eigenschaften, passiert nichts.

02 pre für Fließtext verwenden

white-space: pre verhindert automatische Zeilenumbrüche. Langer Text läuft über den Container hinaus. Verwende stattdessen pre-wrap, wenn du Leerzeichen bewahren und trotzdem umbrechen willst.

03 nowrap auf breite Textblöcke

nowrap auf einem Absatz mit viel Text erzeugt eine extrem breite, nicht umbrechende Zeile. Das ist fast nie gewollt. Verwende nowrap nur für kurze Inline-Elemente.

04 Leerzeichen im HTML für Einrückung missbrauchen

Mit white-space: pre werden alle Leerzeichen sichtbar, auch die Einrückung im Quelltext. Achte darauf, dass dein HTML-Quelltext keine ungewollten Leerzeichen enthält.

05 pre-line und pre-wrap verwechseln

pre-line fasst Leerzeichen zusammen (wie normal), bewahrt aber Zeilenumbrüche. pre-wrap bewahrt beides. Wähle bewusst den richtigen Wert.

Browser-Kompatibilität

5 von 5

white-space wird von allen modernen Browsern vollständig unterstützt. Der Wert break-spaces wird seit 2020 von allen Browsern unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

3 von 5

white-space funktioniert in den meisten Email-Clients. Verwende normal und nowrap für maximale Kompatibilität. Die pre-Varianten werden nicht überall zuverlässig unterstützt.

Apple Mail

Komplett
Gmail

Komplett
Outlook

Teilweise

pre-wrap und pre-line werden in älteren Outlook-Versionen nicht zuverlässig unterstützt
Thunderbird

Komplett
Yahoo Mail

Teilweise

pre und pre-wrap können problematisch sein

Steckbrief white-space

Syntax: white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces
Initialwert: normal
Vererbt: Ja
Animierbar: Nein

Kategorie: Typografie
Werte: 7
Beispiele: 4
Browser: 5 von 5
E-Mail: 3 von 5
Stand: 03.07.2026

Inhalt

7 Kapitel

Verwandt

text-wrap word-break text-overflow writing-mode

Üben /lernen/css

Im CSS-Kurs gestaltest du echte Seiten selbst und prüfst jede Aufgabe direkt im Browser.

Zum CSS-Kurs

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da