# text-wrap: balance

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

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.

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

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