Let’s take a look at the CSS text-wrap property and how we can use it to improve the way text flows on a web page.
Balanced Text
We can use text-wrap: balance to tell the browser to equalize (as much as it can) multiple lines of text. Check out the example below comparing default text wrapping with balanced text wrapping (works in Chrome, Edge, and Firefox).
See the Pen text-wrap: balance (basic) by Will Boyd (@lonekorean) on CodePen.
Nice. Manually balancing lines of text with <br> elements is a hassle and doesn’t fare well with responsive layouts. I’ve also seen JavaScript used to dynamically insert the <br> elements, but resorting to JavaScript to wrap text is not something I’m excited about. Letting the browser handle it for us with a single line of CSS is much nicer.
Headings are the prime candidate for text-wrap: balance, especially when they’re centered. Compare these two versions of a heading, unbalanced versus balanced (again, works in Chrome, Edge, and Firefox).
See the Pen text-wrap: balance (heading comparison) by Will Boyd (@lonekorean) on CodePen.
Just a note of caution, sometimes applying text-wrap: balance to left/right aligned headings can make text stack too much to one side, causing your layout to appear lopsided. In other words, ironically, balanced text can unbalance a layout. Use your best judgement!
Pretty Text
There’s also text-wrap: pretty, which tells the browser to use a better but slower algorithm for flowing text. This is intended to be used on body text to improve readability.
Probably the most popular benefit it provides is preventing orphans (an orphan is a word at the end of a paragraph that wraps into a line by itself, which can look a bit awkward). Here’s an example (works in Chrome and Edge).
See the Pen text-wrap: pretty (orphan) by Will Boyd (@lonekorean) on CodePen.
Notice how “wanted” would normally be an orphan, but text-wrap: pretty prevents that. There’s more going on than just wrapping an extra word before the orphan, though. See how “bit” was wrapped to the second line? That’s the algorithm adjusting multiple lines to improve readability. Much better than trying to avoid orphans by “gluing” the last two words of a paragraph together with a .
Another benefit of text-wrap: pretty is reducing excessive hyphenation. Take a look at how it affects text with hyphenation enabled via hyphens: auto (again, works in Chrome and Edge).
p {
hyphens: auto;
}
p.bottom {
text-wrap: pretty;
}See the Pen text-wrap: pretty (hyphenation) by Will Boyd (@lonekorean) on CodePen.
If, towards the end of a paragraph, there are multiple consecutive lines ending with hyphenated words, then text-wrap: pretty will adjust them. It’s a nice little readability improvement.
Browser Support
At the time of writing, text-wrap: balance is not yet supported in Safari, and text-wrap: pretty is not yet supported in Safari and Firefox. I do expect that full support will come eventually (it’s already in development for Safari).
The great thing though, is you can safely use text-wrap anyway. Browsers that don’t support it will just ignore it and wrap text normally, so you’re not any worse off.
Performance
Using text-wrap with balance or pretty invokes layout algorithms that do more work, which can lead to increased rendering time.
For text-wrap: balance, browsers safeguard against this by only doing the work if the text doesn’t exceed a certain number of lines. Currently, the limit is six lines for Chrome and Edge, and ten lines for Firefox. If the text goes beyond that, text-wrap: balance is ignored.
There is no such limit for text-wrap: pretty, which honestly had me slightly concerned. So I tested it.
For my test, I created a simple page that repeated a ten-line paragraph 200 times. I made sure the paragraph ended with an orphan for text-wrap: pretty to fix. Then in the Chrome dev tools performance tab, I enabled 6x CPU slowdown and checked how long it took the page to render — ten times without text-wrap: pretty and ten times with.
Averaged results:
- Without
text-wrap: pretty: 96.7ms - With
text-wrap: pretty: 101.6ms
Not much of a difference, considering the amount of text and the 6x CPU slowdown. This makes me feel alright about using text-wrap: pretty. The render times were pretty stable during my testing, so I’m fairly confident in them, but will acknowledge that this wasn’t the most scientifically rigorous experiment.
In Closing
Generally speaking, you’ll want to use text-wrap: balance for headings and text-wrap: pretty for body text. Give them a try in your layout and see how they look. If they look good, great! It’s an easy way to improve the overall readability of your web pages. If not, that’s fine, you certainly aren’t required to use them.
If you’re interested in specific situational techniques for controlling text wrapping, check out my deep dive into text wrapping and word breaking.