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 to fix that.
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.
text-wrap: unset |
text-wrap: balance |
|---|---|
This feature is available in all major browsers Show archive.org snapshot .
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.
