So you have headlines on your site that wrap only one or two words to the next line at a certain breakpoint, looking uneven and awkward. They would look much better if they were balanced — the amount of text on each line should be about the same when it wraps.
Now there's a way with CSS:
Check out the video below to see how it works:
Before using this, you had to either:
- Do nothing. 🙈
- Manually place
­tags at the positions you want the browser to break a line. But that's tedious.
It's an experimental property that currently has limited browser support.
Mainly, only recent versions of Chrome and Edge support it. Still, I'd rather half of the population see nice headings than 0%.
Using this property for a small number of elements is fine. Even the following could work:
But don't try to balance every line of text on the page because it will slow down its rendering performance.
The browser needs to do a lot of work to balance the text, so use it sparingly.
The spec allows browsers to skip balancing if there are more than ten lines of text. Chromium browsers will only balance 4 lines or less.
So applying it to headings and pull quotes are the best use case.
The following won't work as they are contradicting properties:
white-space property instructs the browser not to wrap the text,
text-wrap tells the browser it's okay. The result is unbalanced
To balance the text, remove the