Schöne Zeilenumbrüche in CSS – text-wrap balance und pretty

Kennst du das: Eine Überschrift bricht so um, dass in der letzten Zeile nur ein einziges Wort steht? Oder ein Absatz endet mit einem einsamen „Wort." ganz allein in der Zeile? Das nennt man Schusterjunge bzw. Hurenkind – und es lässt sonst saubere Typografie unruhig wirken. Früher habe ich das mit von Hand gesetzten <br> geflickt. Die Umbrüche saßen dann aber nur bei genau einer Bildschirmbreite richtig. Heute erledigt das der Browser – mit text-wrap.

Für Überschriften: balance

text-wrap: balance verteilt die Wörter so auf die Zeilen, dass alle etwa gleich lang sind. Perfekt für Überschriften, Buttons und kurze Textblöcke:

h1, h2, h3,
.karte-titel,
blockquote {
  text-wrap: balance;
}

Der Browser rechnet dafür ein paar Umbruch-Varianten durch. Deshalb wirkt balance nur auf kurze Texte (die Engines begrenzen es meist auf wenige Zeilen) – genau da, wo man es braucht. Für einen langen Fließtext wäre es Verschwendung.

Für Fließtext: pretty

Bei längeren Absätzen willst du kein Gleichgewicht, sondern nur keine einsame letzte Zeile. Das macht text-wrap: pretty:

p, li {
  text-wrap: pretty;
}

pretty bricht wie gewohnt um, achtet aber am Ende darauf, dass nicht ein Wort allein übrig bleibt. Der Effekt ist dezent, aber ein gut gesetzter Absatz liest sich spürbar ruhiger.

Sicher einsetzen

Beides ist ein reiner Komfort-Gewinn: Wo ein älterer Browser balance oder pretty nicht kennt, bricht der Text einfach normal um – nichts geht kaputt. Du brauchst also keinen Fallback. Ich lege es global an und gut ist:

:where(h1, h2, h3, figcaption) { text-wrap: balance; }
:where(p, li, dd)             { text-wrap: pretty; }

Das :where() hält die Spezifität bei null, sodass du es an einzelnen Stellen mühelos wieder überschreiben kannst.

Ich setze das inzwischen in jedem Website-Projekt ein – es ist einer dieser Handgriffe, die niemandem auffallen und trotzdem den Unterschied zwischen „ganz ok" und „wirkt professionell" ausmachen. Wenn du eine Website mit sauberer Typografie und eigenem CMS möchtest, schreib mir auf bymw.de.

Quellen

• text-wrap – CSS (MDN Web Docs)
• CSS text-wrap: balance (web.dev)