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.
4 thoughts on “You can use text-wrap: balance; on icons”
@Edent omg. That's a great use for this! I didn't realise it worked on anything other than text. That thing with a row of icons is otherwise so hard to do!!
| Reply to original comment on front-end.social
@Edent thanks! I wasn't aware of that.
| Reply to original comment on fosstodon.org
Rene Pohland
I don't think the name is misleading because it controls the text flow and inline elements are bound to the text flow. But yeah, most people don't realize that you use
text-wrap: balance;for icons and so on.Terence Eden on using text-wrap: balance for more than headings: But the name is, I think, slightly misleading. It doesn’t only work […]
| Reply to original comment on css-tricks.com
More comments on Mastodon.