text-wrap: balance ➶

A CSS rule I did not know existed, useful to avoid orphans — single words after a line break.

Text is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive, this value is only supported for blocks of text spanning a limited number of lines (six or less for Chromium and ten or less for Firefox).

h1, h2, h3, h4, h5, h6 {text-wrap:balance;}

Found while fussing with the headline in the prior article.

✶ Published

· ˖ ✦ . ˳

Come with me in creative journeys through music and play by subscribing to my YouTube and Twitch channels. ❤︎ Did you enjoy this post? You can buy me a moment of time.


Possibly Related:

˳ · ˖

Prior entry:
Next entry: