Skip to content Paweł Grzybek

You need to know the balance! CSS balance!

Since I heard about the CSS text-wrap: balance, I can’t stop singing, “You need to know the balance, NatWest balance, CSS balance”. The origin is the song by MC Quakez & Shakes “Balance”, which we always sing with my friends!

MC Quakez & Shakes singing about the CSS balance

Jokes aside because CSS text-wrap: balance is really cool. It is defined as part of the CSS Text Module Level 4, and at the time of writing this article works only in Google Chrome Canary behind the “Experimental Web Platform features” flag.

It breaks multiple lines of text to visually better distribute the remaining space and prevents typographic widows. Unfortunately, due to the resource-hungry algorithm, this functionality is limited to text length. The specification draft sets this limit to 10, but the currently shipped Google Chrome Canary implementation limits this feature to 4 lines of text. So soon, we may not need React Wrap Balancer anymore. Have a look at the difference!

The difference after applying CSS text-wrap: balance to the heading

You need to know the balance, NatWest balance, CSS balance 🎶

Leave a comment

👆 you can use Markdown here

Your comment is awaiting moderation. Thanks!