The Death of the Orphan: How 'text-wrap: balance' is Revolutionizing Web Typography
For decades, web designers and front-end developers have fought an invisible war against typographic "orphans" and "widows"—those lonely, single words stranded on a line of their own at the end of a paragraph or a headline.
In print media, graphic designers have the luxury of static page widths. They can manually adjust tracking, kerning, and word spacing until every line looks perfect. On the responsive web, however, text container widths change constantly depending on the user's screen size. A headline that looks beautiful on an iPhone might display a single, awkward word on the next line when viewed on an iPad.
But with the widespread adoption of the CSS property text-wrap: balance, this layout nightmare is officially a thing of the past.
The Old Way: A Catalog of Brittle Hacks
Before modern CSS stepped in, developers had to rely on clever but fragile workarounds to prevent orphans in headlines.
The Band-Aid
The most common approach was manually inserting a non-breaking space ( ) between the last two words of a heading.
<h1>The Death of the Orphan</h1>
While effective for static content, this approach failed miserably when working with dynamic, user-generated content from a CMS. It also bloated HTML and made translation workflows incredibly painful.
The JavaScript Heavy-Lifters
For larger sites, developers resorted to JavaScript libraries like BalanceText. These scripts would measure the width of the text container, calculate line breaks, and inject <br> tags dynamically. Unfortunately, this meant layout shifts (CLS), extra DOM manipulation, and a performance penalty on load.
Enter text-wrap: balance
The CSS Text Layout Module Level 4 introduced a elegant native solution: text-wrap: balance.
When applied to an element, it instructs the browser to automatically calculate the ideal line breaks so that the width of each line is as equal as possible.
h1, h2, h3, .balanced-headline {
text-wrap: balance;
}
Instead of filling the first line to maximum capacity and leaving a single word on the second line, the browser balances the layout distribution:
Without Balance (Default):
The Death of the Orphan: How "text-wrap: balance" is Revolutionizing Web Typography
With Balance:
The Death of the Orphan: How "text-wrap: balance" is Revolutionizing Web Typography
The difference is subtle but profoundly improves readability and visual hierarchy.
How It Works Under the Hood
The browser's layout engine handles the balancing calculations dynamically. Because the browser knows the exact font metrics, viewport width, and container constraints, it can execute a binary search algorithm to find the smallest width that wraps the text into the same number of lines without overflowing.
Because this math can be computationally expensive, browsers restrict text-wrap: balance to a maximum of four or six lines of text (depending on the browser engine). If a paragraph exceeds this limit, the browser simply ignores the property and falls back to standard text wrapping.
Best Practices for Web Performance
Because of these computational limitations, you should never apply text-wrap: balance to your entire body text. Doing so can degrade page-load performance and scrolling frame rates. Instead, scope it specifically to short-form text:
- Headlines and Subheadings (
h1,h2,h3,h4) - Blockquotes
- Card titles
- Hero section taglines
The Next Step: text-wrap: pretty
While text-wrap: balance is perfect for headers, what about those longer paragraphs where you still want to avoid orphans but don't want lines of equal width?
That is where its sibling property, text-wrap: pretty, comes in.
p {
text-wrap: pretty;
}
Unlike balance, which seeks to make all lines equal in length, pretty evaluates the text block and makes minor adjustments to ensure the last line has at least two words. It is optimized for longer passages of text and has a much lower performance overhead.
Conclusion: Embellishing the Responsive Web
The introduction of text-wrap: balance marks a major milestone in web typography. It bridges the gap between the artistic control of traditional print design and the fluid, dynamic nature of the modern web.
Best of all, it degrades gracefully. In older browsers that don't support it, the text simply falls back to standard wrapping. There is no risk, no JavaScript dependencies, and no complicated markup—just beautiful, balanced typography out of the box.
Photo by Thắng-Nhật Trần on Pexels