You Can Use Text-wrap: Balance; On Icons

Terence Eden on its use text-wrap: balance for more than headings:

But the name is a bit misleading in my opinion. That is not the case only Work on the text. It will continue any Contents. For example: I have a set of icons at the bottom of this page. If the viewport is too narrow, a single symbol may move to the next line. This may look a bit strange.

Hell yes. Maybe I was reaching for something like that Approach to automatically adjust the gridbut hey, if you can, you can use a one-liner! And while we’re on the subject, I just want to mention that, yeah, text-wrap: balance will work on it any Contents. – you just have to know that The specification is a bit stubborn in this regard and make sure the content is correct less than five lines.

There will likely be even more nuance if the Issue 6 note in the spec is any indication possibly taking into account a minimum cable length:

Suggestion for value space is match-indent | | (using Xch as an example to illustrate this use case). Alternately could actually count the characters.

Direct link →