Perfectly Balanced Text: How to Use text-wrap: balance; in CSS
Back in 1998, I landed my first professional web job working on a large dev team tasked with building the BellSouth Yellow Pages brochure sites. It was a different era—tables for layout, 56k modems, and designers who insisted that every pixel and every word mattered. Our team had a full-time editor on staff who was famously strict about typographic rules. One rule in particular drove all of us developers nuts: every heading and paragraph had to end with a non-breaking space between the last two words to avoid orphans. If we forgot—even once—the editor would kick the work back to us to fix. It felt frustrating at the time. But over the years, I’ve come to truly appreciate it.
Typography is subtle, but powerful. Those small, thoughtful choices—like preventing a single word from dangling on a line by itself—add up to an experience that feels polished and intentional. Today, I still follow that same rule across all my projects. And now with text-wrap: balance, we’ve finally got a modern CSS tool that helps bring that same elegance to the web in a smarter way.
What Is text-wrap: balance;?
The text-wrap: balance; property tells the browser to intelligently balance the lines of text within an element—usually headings—so that line breaks happen in a more visually pleasing way.
Instead of long first lines and short, awkward final lines, the text gets distributed more evenly, creating a cleaner, more balanced look.
📖 Example Before and After
Without text-wrap: balance;
Make Your Headings Look
ProfessionalWith text-wrap: balance;
Make Your Headings
Look ProfessionalHow to Implement It
Adding this feature is as simple as a one-liner in your CSS:
h1, h2, h3 {
text-wrap: balance;
}Apply it to headings, subheadings, or even specific paragraph classes where balanced line breaks are important.
Is It Safe to Use Today?
- Supported: Chrome, Edge (Latest versions)
- In Progress: Firefox and Safari (experimental support)
- Recommendation: Safe to use today with graceful fallback for unsupported browsers.
Why Use It?
- ✨ Reduces the need for manual non-breaking spaces (
). - ✨ Improves visual harmony, especially in hero sections and large headings.
- ✨ Enhances readability by avoiding awkward one-word final lines (orphans).
- ✨ Requires no JavaScript or manual markup changes.
Final Thoughts
While text-wrap: balance; is a newer addition to CSS, it’s a game changer for designers and developers who care about typography and clean layouts. As browser support continues to grow, this little CSS trick will quickly become a standard part of your toolkit.
Go ahead—add it to your stylesheets and watch your text layouts transform!
About the Author
Back in 1998, I landed my first professional web job working on a large dev team tasked with building the BellSouth Yellow Pages brochure sites. It was a different era—tables for layout, 56k modems, and designers who insisted that every pixel and every word mattered. Our team had a full-time editor on staff who was famously strict about typographic rules. One rule in particular drove all of us developers nuts: every heading and paragraph had to end with a non-breaking space between the last two words to avoid orphans. If we forgot—even once—the editor would kick the work back to us to fix. It felt frustrating at the time. But over the years, I’ve come to truly appreciate it.
Typography is subtle, but powerful. Those small, thoughtful choices—like preventing a single word from dangling on a line by itself—add up to an experience that feels polished and intentional. Today, I still follow that same rule across all my projects. And now with text-wrap: balance, we’ve finally got a modern CSS tool that helps bring that same elegance to the web in a smarter way.
What Is text-wrap: balance;?
The text-wrap: balance; property tells the browser to intelligently balance the lines of text within an element—usually headings—so that line breaks happen in a more visually pleasing way.
Instead of long first lines and short, awkward final lines, the text gets distributed more evenly, creating a cleaner, more balanced look.
📖 Example Before and After
Without text-wrap: balance;
Make Your Headings Look
ProfessionalWith text-wrap: balance;
Make Your Headings
Look ProfessionalHow to Implement It
Adding this feature is as simple as a one-liner in your CSS:
h1, h2, h3 {
text-wrap: balance;
}Apply it to headings, subheadings, or even specific paragraph classes where balanced line breaks are important.
Is It Safe to Use Today?
- Supported: Chrome, Edge (Latest versions)
- In Progress: Firefox and Safari (experimental support)
- Recommendation: Safe to use today with graceful fallback for unsupported browsers.
Why Use It?
- ✨ Reduces the need for manual non-breaking spaces (
). - ✨ Improves visual harmony, especially in hero sections and large headings.
- ✨ Enhances readability by avoiding awkward one-word final lines (orphans).
- ✨ Requires no JavaScript or manual markup changes.
Final Thoughts
While text-wrap: balance; is a newer addition to CSS, it’s a game changer for designers and developers who care about typography and clean layouts. As browser support continues to grow, this little CSS trick will quickly become a standard part of your toolkit.
Go ahead—add it to your stylesheets and watch your text layouts transform!
About the Author
