Terence Eden. He has a beard and is smiling.
Theme Switcher:

You can use text-wrap: balance; on icons

· 4 comments · 200 words · Viewed ~4,403 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
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.


Share this post on…

4 thoughts on “You can use text-wrap: balance; on icons”

  1. 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.

    Reply

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

See allowed HTML elements: <a href="" title="">
<abbr title="">
<acronym title="">
<b>
<blockquote cite="">
<br>
<cite>
<code>
<del datetime="">
<em>
<i>
<img src="" alt="" title="" srcset="">
<p>
<pre>
<q cite="">
<s>
<strike>
<strong>

To respond on your own website, write a post which contains a link to this post - then enter the URl of your page here. Learn more about WebMentions.