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.
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).
Nice. Manually balancing lines of text with
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).
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!
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).
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).
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.
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.
pretty invokes layout algorithms that do more work, which can lead to increased rendering time.
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.
text-wrap: pretty: 96.7ms
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.
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.