Type and forms

text-wrap: balance

Newly availablesince May 2024

Replaces: Manual line breaks and max-width guesses to stop a headline ending on one orphaned word. The browser balances the lines.

See it working

default

A headline that is just long enough to leave one word alone

text-wrap: balance

A headline that is just long enough to leave one word alone

The syntax

h1, h2, h3 { text-wrap: balance; }
p          { text-wrap: pretty; }

The demo’s full CSS

.dm-tw { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; resize: horizontal; overflow: auto; max-width: 100%; min-width: 260px; }
.dm-tw div { padding: 12px; border-radius: 10px; background: #fff; border: 1px solid #dfe2ea; }
.dm-tw span { font-family: ui-monospace, monospace; font-size: 11px; color: #3d4450; }
.dm-tw h4 { margin: 6px 0 0; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.dm-tw-b { text-wrap: balance; }

For browsers without it

None needed. A browser without it wraps the old way, and the orphan comes back. Add it to every heading today: it costs one line and cannot hurt.