Stop one word sitting alone on the last line of a heading
Add text-wrap: balance to your headings and the browser evens out the line lengths, so no word is left on a line of its own.
The code
h1, h2, h3 {
text-wrap: balance;
}Use it on headings, not body text. Chrome and Edge only balance blocks of up to six lines, so long paragraphs are left as they are. For paragraphs, text-wrap: pretty is the newer option; fewer browsers support it so far.
Tested
: in Chromium (through Playwright), on a 96 px heading in a 648 px box. Without the rule it wrapped 4, 2 and 1 words per line, leaving "earning" on its own. With text-wrap: balance it wrapped 2, 3 and 2.
Browser support
Chrome and Edge 114+, Firefox 121+ and Safari 17.5+. Older browsers ignore the line and wrap as before. Sources: MDN: text-wrap, Can I use: text-wrap: balance.
Transcript
One line of CSS stops this happening on every heading. Let me show you how.
See this heading? One word left on its own on the last line. On a phone it happens all the time.
Here's the trick. Add text-wrap: balance to your headings. The browser now evens out the line lengths, so no word is stranded.
It works in current Chrome, Safari, Firefox and Edge, and older browsers ignore it, so nothing breaks.
I've added a link to this snippet in the comments below.
On screen: a heading that reads "Small fixes that keep your website earning", with "earning" alone on the last line. Then a code editor showing h1, h2, h3 { text-wrap: balance; }, and the heading before and after, now spread evenly over three lines. A card lists Chrome 114+, Safari 17.5+, Firefox 121+ and Edge 114+.
The presenter in the video is an AI avatar made in HeyGen, speaking with a clone of Jamie's voice. The script, demo and test were made by ELK Digital with Claude.