# text-wrap: balance

Status: Baseline 2024 (Chrome 114, Safari 17.5, Firefox 121).  
Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap  
Seite: https://designforai.dev/de/css/text-wrap

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.

## HTML

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

## CSS

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

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

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