text-wrap: balance

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

Chrome 114Edge 114Safari 17.5Firefox 121

Balances line lengths in short blocks of text (headings, captions) so you never get a single orphaned word on the last line. Limited to a few lines by design.

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: Unsupported browsers wrap normally; no guard needed.

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

Prompt

Apply `text-wrap: balance` to headings, blockquote intros and card titles (anything under ~4 lines). Do not apply it to body paragraphs; use `text-wrap: pretty` there where supported. Combine with `max-width` in `ch` units.