text-wrap

text-wrap bestimmt, ob und vor allem wie der Browser Text auf Zeilen verteilt. Standardmäßig füllt der Browser jede Zeile so weit wie möglich und bricht dann um. Das führt bei Überschriften oft zu unschönen Ergebnissen: eine lange erste Zeile und ein einzelnes Wort darunter. Mit text-wrap: balance bekommst du ausgeglichene Zeilenlängen für Überschriften, mit text-wrap: pretty schönere Umbrüche im Fließtext. Die Eigenschaft ist eine Shorthand für text-wrap-mode und text-wrap-style.

Steckbrief text-wrap

Syntax: text-wrap: wrap | nowrap | balance | pretty | stable
Initialwert: wrap
Vererbt: Ja
Animierbar: Nein
Kurzform für: text-wrap-mode, text-wrap-style

Kategorie: Typografie
Werte: 12
Beispiele: 4
Browser: 4 von 5
E-Mail: 0 von 5
Stand: 03.07.2026

Grundlagen

Der klassische Umbruch-Algorithmus arbeitet zeilenweise: Der Browser packt so viele Wörter wie möglich in die erste Zeile, dann in die zweite und so weiter. Was am Ende übrig bleibt, landet in der letzten Zeile. Dadurch entstehen zwei typische Probleme: Überschriften mit stark unterschiedlich langen Zeilen und Absätze, deren letzte Zeile nur aus einem einzelnen kurzen Wort besteht.

text-wrap: balance löst das erste Problem. Der Browser verteilt den Text so auf die Zeilen, dass alle Zeilen möglichst gleich lang sind. Das Ergebnis wirkt ruhiger und lässt sich leichter erfassen, ideal für Überschriften, Teaser und kurze Absätze. Weil das Ausbalancieren Rechenzeit kostet, begrenzen die Browser den Effekt auf kurze Texte: Chromium balanciert höchstens sechs Zeilen, Firefox höchstens zehn. Bei längeren Texten passiert einfach nichts.

text-wrap: pretty kümmert sich um das zweite Problem. Statt Zeile für Zeile zu entscheiden, betrachtet der Browser den Absatz als Ganzes und wählt Umbruchstellen, die insgesamt ein schöneres Schriftbild ergeben. Vor allem vermeidet er ein einzelnes Wort allein in der letzten Zeile. pretty ist für Fließtext gedacht, bei dem Typografie wichtiger ist als maximale Rendering-Geschwindigkeit.

Dazu kommen zwei weitere Werte: nowrap verhindert den automatischen Zeilenumbruch komplett, und stable sorgt bei editierbaren Inhalten (etwa contenteditable) dafür, dass bereits umgebrochene Zeilen beim Tippen nicht ständig neu springen.

Technisch ist text-wrap eine Shorthand für zwei Longhands: text-wrap-mode steuert, ob umgebrochen wird (wrap oder nowrap), und text-wrap-style steuert, wie umgebrochen wird (auto, balance, pretty oder stable).

Syntax & Werte

12 Werte

text-wrap (Shorthand)

Wert	Beschreibung	Beispiel
`wrap`	Standardverhalten. Text bricht an erlaubten Stellen (Leerzeichen, Bindestriche) automatisch um.	text-wrap: wrap
`nowrap`	Kein automatischer Zeilenumbruch. Der Text läuft in einer Zeile weiter.	text-wrap: nowrap
`balance`	Verteilt den Text auf möglichst gleich lange Zeilen. Wirkt nur bei wenigen Zeilen, ideal für Überschriften.	text-wrap: balance
`pretty`	Optimiert die Umbrüche des gesamten Absatzes und vermeidet ein einzelnes Wort in der letzten Zeile.	text-wrap: pretty
`stable`	Wie wrap, aber beim Bearbeiten von Text bleiben die Zeilen vor dem Cursor stabil.	text-wrap: stable
`inherit`	Erbt den Wert explizit vom Elternelement.	text-wrap: inherit

text-wrap-mode

Wert	Beschreibung	Beispiel
`wrap`	Text bricht automatisch am Zeilenende um.	text-wrap-mode: wrap
`nowrap`	Text bricht nicht automatisch um.	text-wrap-mode: nowrap

text-wrap-style

Wert	Beschreibung	Beispiel
`auto`	Standardverhalten. Der Browser nutzt seinen normalen, zeilenweisen Umbruch-Algorithmus.	text-wrap-style: auto
`balance`	Gleich lange Zeilen für kurze Texte wie Überschriften.	text-wrap-style: balance
`pretty`	Bessere Umbruchstellen für Fließtext, keine einzelnen Wörter in der letzten Zeile.	text-wrap-style: pretty
`stable`	Stabile Zeilen beim Editieren von Inhalten.	text-wrap-style: stable

Beispiele

4 Beispiele

Der Klassiker: Ohne balance füllt der Browser die erste Zeile komplett und lässt ein einzelnes Wort in die zweite Zeile rutschen. Mit balance verteilt er den Text gleichmäßig.

Überschrift ohne und mit text-wrap: balance

/* Alle Überschriften ausbalancieren */
h1, h2, h3 {
  text-wrap: balance;
}

<div class="bal-demo">
<div class="bal-off"><div class="label">Ohne balance</div><div class="headline">Ausgeglichene Zeilen machen Überschriften angenehmer lesbar</div></div>
<div class="bal-on"><div class="label">text-wrap: balance</div><div class="headline">Ausgeglichene Zeilen machen Überschriften angenehmer lesbar</div></div>
</div>

pretty verbessert die Umbrüche im gesamten Absatz und verhindert, dass ein einzelnes kurzes Wort allein in der letzten Zeile steht. Falls du diese Seite in Firefox liest, sehen beide Spalten gleich aus: Firefox unterstützt pretty noch nicht und bricht den Text ganz normal um. Genau deshalb kannst du den Wert gefahrlos einsetzen, mehr dazu im Abschnitt Browser-Kompatibilität.

Fließtext ohne und mit text-wrap: pretty

/* Schönere Umbrüche für Fließtext */
p {
  text-wrap: pretty;
}

<div class="pretty-demo">
<div class="pr-off"><div class="label">Ohne pretty</div><p>Ein einzelnes kurzes Wort ganz allein in der letzten Zeile eines Absatzes stört beim Lesen den Fluss.</p></div>
<div class="pr-on"><div class="label">text-wrap: pretty</div><p>Ein einzelnes kurzes Wort ganz allein in der letzten Zeile eines Absatzes stört beim Lesen den Fluss.</p></div>
</div>

Ein typisches Praxis-Setup: balance für die Karten-Titel, pretty für die Beschreibungstexte. Die Titel wirken aufgeräumt und in den Texten bleiben keine einsamen Wörter zurück.

balance und pretty in Teaser-Karten

.card-title { text-wrap: balance; }
.card-text  { text-wrap: pretty; }

<div class="tw-cards">
<div class="card">
  <div class="card-title">Grundlagen für sauberen Textumbruch</div>
  <div class="card-text">Lerne, wie der Browser Zeilen füllt und wo du eingreifen kannst.</div>
</div>
<div class="card">
  <div class="card-title">Ausgeglichene Überschriften mit balance</div>
  <div class="card-text">Gleich lange Zeilen sorgen für ein ruhiges und lesbares Layout.</div>
</div>
<div class="card">
  <div class="card-title">Bessere Absätze mit pretty</div>
  <div class="card-text">Keine einzelnen Wörter mehr am Ende eines Absatzes.</div>
</div>
</div>

Die Shorthand text-wrap setzt beide Longhands auf einmal. Brauchst du nur einen der beiden Aspekte, kannst du gezielt die Longhand verwenden. Das ist praktisch, wenn du zum Beispiel den Umbruchstil setzen willst, ohne ein eventuell geerbtes nowrap zu überschreiben.

/* Shorthand */
.headline {
  text-wrap: balance;
}

/* Entspricht den beiden Longhands */
.headline {
  text-wrap-mode: wrap;
  text-wrap-style: balance;
}

/* Nur den Stil setzen, den Modus unangetastet lassen */
.teaser {
  text-wrap-style: pretty;
}

Abgrenzung zu white-space

white-space und text-wrap überschneiden sich, beantworten aber unterschiedliche Fragen. white-space regelt, was mit Leerzeichen, Tabs und Zeilenumbrüchen aus dem Quelltext passiert und ob der Text überhaupt umbricht. text-wrap regelt nur den Umbruch selbst und vor allem seine Qualität: balance, pretty und stable gibt es ausschließlich hier.

Technisch hängen beide zusammen: white-space ist in modernem CSS ebenfalls eine Shorthand und setzt neben white-space-collapse auch text-wrap-mode. Deshalb verhindern white-space: nowrap und text-wrap: nowrap beide den Zeilenumbruch. Der Unterschied: white-space: nowrap beeinflusst zusätzlich die Behandlung der Leerzeichen, text-wrap: nowrap lässt sie unangetastet.

Und wenn ein einzelnes Wort zu lang für die Zeile ist, hilft keine der beiden Eigenschaften weiter. Dann brauchst du word-break & overflow-wrap, um innerhalb des Wortes umzubrechen.

Barrierefreiheit

balance und pretty sind kleine Verbesserungen mit großer Wirkung für die Lesbarkeit. Gleich lange Zeilen und das Vermeiden einzelner Wörter am Absatzende reduzieren visuelle Sprünge beim Lesen. Davon profitieren alle, besonders aber Menschen mit Leseschwierigkeiten oder Konzentrationsproblemen. Du kannst beide Werte bedenkenlos einsetzen.

Für text-wrap: nowrap gilt die gleiche Vorsicht wie bei white-space: nowrap: Text, der nicht umbricht, kann bei schmalen Viewports oder starker Bildschirmvergrößerung aus dem sichtbaren Bereich laufen. Verwende nowrap nur für kurze Inhalte wie Labels oder Badges, nie für längere Texte.

Screenreader lesen den Text unabhängig von den Umbruchstellen vor. Für die Ausgabe per Sprachausgabe macht text-wrap also keinen Unterschied.

Häufige Fehler

6 Fehler

01 balance auf lange Absätze setzen

balance wirkt nur bis zu einer Zeilen-Obergrenze (Chromium: sechs Zeilen, Firefox: zehn Zeilen). Bei längeren Texten passiert schlicht nichts. Für Fließtext ist pretty der passende Wert.

02 Sich auf pretty verlassen

Firefox unterstützt pretty noch nicht. Behandle den Wert als progressive enhancement: Das Layout muss auch mit normalem Umbruch funktionieren.

03 balance pauschal auf alles setzen

Das Ausbalancieren kostet Rechenzeit beim Layout. Setze balance gezielt auf Überschriften und Teaser, nicht per Universalselektor auf die ganze Seite.

04 white-space und text-wrap gegeneinander arbeiten lassen

Beide Shorthands setzen text-wrap-mode. Deklarierst du erst text-wrap: nowrap und später white-space: normal, ist das nowrap wieder weg. Wenn du beide brauchst, setze die Longhands bewusst oder achte auf die Reihenfolge.

05 Manuelle Umbrüche mit balance kombinieren

Feste <br>-Umbrüche in Überschriften machen balance überflüssig und funktionieren bei anderen Viewport-Breiten nicht mehr. Lass den Browser die Umbruchstellen wählen.

06 Zentrierung von balance erwarten

balance ändert nur die Umbruchstellen, nicht die Ausrichtung. Für zentrierten Text brauchst du weiterhin text-align: center, gerne in Kombination mit balance.

Browser-Kompatibilität

4 von 5

text-wrap mit den Werten wrap, nowrap, balance und stable wird von allen modernen Browsern unterstützt. Nur pretty fehlt derzeit noch in Firefox. Dort fällt der Text harmlos auf den normalen Umbruch zurück, es geht also nichts kaputt.

Chrome

Komplett
Firefox

Teilweise

pretty wird noch nicht unterstützt und degradiert zum normalen Umbruch
Safari

Komplett

pretty erst in neueren Versionen, ältere zeigen normalen Umbruch
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

text-wrap wird von Email-Clients praktisch nicht unterstützt. Da die Eigenschaft ohne Support einfach beim normalen Umbruch bleibt, richtet sie in Emails keinen Schaden an. Verlasse dich in Email-Layouts aber nicht auf balance oder pretty.

Apple Mail

Keine

text-wrap wird ignoriert, Text bricht normal um
Gmail

Keine
Outlook

Keine
Thunderbird

Keine
Yahoo Mail

Keine

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