Balance your texts today with text-wrap: balance

Updated . Posted . Visible to the public. Repeats.

So you have a heading that is just barely wider than the container it should fit into, and it wraps a single word to a new line and it's not really pretty?
Cry no more, for you can use text-wrap: balance today to fix that. At least in some browsers.

When browsers encounter a text-wrapping element with text-wrap: balance style, they will try breaking to a new line sooner, if it balances out the width of lines.

Without text-wrap: balance With text-wrap: balance
Image Image

This feature is available in Chrome/Edge 114+ Show archive.org snapshot , and may eventually follow in Firefox Show archive.org snapshot and Safari Show archive.org snapshot .
Even with browser that don't support it yet, there is no reason to not use it today as it progressively enhances user experience.

Note that Chrome limits balancing to 4 lines of text because of performance reasons. So you can use this for headings and teaser texts while it won't work for longer paragraphs.

Caveat

It seems that under some circumstances, text-wrap: balance together with word-break: break-word can cause premature word-breaking, i.e. words will be split while they would not have to be. We are unsure when exactly that happens, but it seems to occur on narrow viewports. (⇒ Example Show archive.org snapshot )
We have never seen that on blocks where hyphenation was enabled with hyphens: auto. If you feel the need for force-breaking words, adding hyphens: auto may be a good default anyway -- at least on small viewports.

Arne Hartherz
Last edit
Arne Hartherz
Attachments
License
Source code in this card is licensed under the MIT License.
Posted by Arne Hartherz to makandra dev (2023-08-01 12:35)