A fun little CSS experiment! There's a new(ish) feature in CSS which allows you to set the way text is wrapped. Ordinarily, a long line of text might be split at an inopportune time. For example:
This very long headline ends with a single
word
Having a dangling word doesn't always look great. Using text-wrap:balance would give us something like:
This very long headline ends
with balanced lines
Hurrah!
But the name is, I think, slightly misleading. It doesn't only work on text. It will work on any content. For example - I have a row of icons at the bottom of this page. If the viewport is too narrow, a single icon might drop to the next line. That can look a bit weird.
Here's a video demo:
So feel free to use text-wrap: balance; on any items which need to be balanced over multiple lines.