You can use text-wrap: balance; on icons
By @edent
· css HTML · 4 comments · 200 words · read ~3,370 times.
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
wordHaving a dangling word doesn't always look great. Using text-wrap:balance would give us something like:
This very long headline ends
with balanced linesHurrah!
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.
@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!!
@Edent thanks! I wasn't aware of that.
Rene Pohland says:
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 […]
More comments on Mastodon.