css text-wrap:balance for pretty little blurbs

Found a somewhat-recent (2024) nice little CSS feature for balanced text-wrapping.

I am by no means a CSS expert. I know just enough to have an idea of what should be possible, and drive myself insane trying to figure out how to do it.

I was working on adding next/previous post links to the bottom of the blog post layout, and I came across this feature which I think makes it look a lot nicer.

The next-post link is right aligned with a little right-arrow ⇒ after the title. If the screen is shrunken just right, then the arrow ends up on its own line, which looks ugly. This tries to balance the number of characters per line. It’s apparently computationally more intensive for browsers and limited to a handful of lines. But this is exactly the use case I imagine it would be for

examples

some quick inline CSS examples

without text-wrap: balance;

a long titled link to the next post ⇒

with text-wrap: balance;

a long titled link to the next post ⇒

conclusion

Here’s a screenshot from the blog on a simulated Iphone SE:

Or see it action by scrolling to the bottom of this page and making the window smaller.