CSS text-wrap balance

Balance the length of lines of text. Suitable for headlines as it will only work on up to four lines in Chrome.

Only works on block containers.

Usage

.text-balance {
  text-wrap: balance;
}

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

Can I Use?

Available from Chrome/Edge 114.

https://caniuse.com/css-text-wrap-balance

Tailwind CSS available after v3.3.2 with text-balance.

Resources

https://developer.chrome.com/blog/css-text-wrap-balance/

https://www.w3.org/TR/css-text-4/#text-wrap