text-wrap

Zuletzt aktualisiert am 3. Juli 2026

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.

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

text-wrap (Shorthand)

text-wrap-mode

text-wrap-style

Beispiele

Überschrift mit und ohne balance

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.

/* 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>

Fließtext mit pretty

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.

/* 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>

Teaser-Karten in der Praxis

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.

.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 Longhands text-wrap-mode und text-wrap-style

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

• 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.
• Sich auf pretty verlassen: Firefox unterstützt pretty noch nicht. Behandle den Wert als progressive enhancement: Das Layout muss auch mit normalem Umbruch funktionieren.
• 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.
• 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.
• 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.
• 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

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.

Email-Kompatibilität

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.

Verwandte Eigenschaften