text-wrap: balance

Baseline 2024 (Chrome 114, Safari 17.5, Firefox 121).

Chrome 114Edge 114Safari 17.5Firefox 121

Gleicht Zeilenlängen in kurzen Textblöcken (Überschriften, Bildunterschriften) aus, sodass nie ein einzelnes verwaistes Wort in der letzten Zeile steht. Absichtlich auf wenige Zeilen begrenzt.

A heading long enough to wrap awkwardly on narrow screens

CSS

.fx-011 {
  text-wrap: balance;
  max-width: 26ch;
  font-family: system-ui;
  line-height: 1.15
}

HTML

<h2 class="fx-011">A heading long enough to wrap awkwardly on narrow screens</h2>

Fallback: Browser ohne Unterstützung brechen normal um; keine Absicherung nötig.

Quelle: developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

Prompt

Wende `text-wrap: balance` auf Überschriften, Blockquote-Einleitungen und Kartentitel an (alles unter ~4 Zeilen). Wende es nicht auf Fließtextabsätze an; nutze dort `text-wrap: pretty`, wo unterstützt. Kombiniere mit `max-width` in `ch`-Einheiten.