white-space

Zuletzt aktualisiert am 3. Juli 2026

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.

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

Beispiele

Alle Werte im Vergleich

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

.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>

Einzeiliger Text mit Ellipsis

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.

.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>

Code-Blöcke mit pre-wrap

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.

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>

Einzeilige Badges und Labels

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

.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

• Ellipsis ohne nowrap: text-overflow: ellipsis funktioniert nur zusammen mit white-space: nowrap und overflow: hidden. Fehlt eine der drei Eigenschaften, passiert nichts.
• 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.
• 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.
• 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.
• 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

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

Email-Kompatibilität

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.

Verwandte Eigenschaften