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
|
|---|---|
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.
