CSS text-wrap: balance

A classic typography technique of hand-authoring line breaks for balanced text blocks, comes to CSS.

Adam Argyle

The balance value for text-wrap is part of CSS Text Level 4. Take a look at the examples in this post to learn how this one line of CSS can massively improve your text layouts.

Without text-wrap: balance; designers, content editors and publishers have few tools to change the way lines are balanced.. The best options available being to use <wbr> or ­ to help guide text layouts into smarter decisions about where to break lines and words.

As a developer, you don't know the final size, font size, or even language of a headline or paragraph. All the variables needed for an effective and aesthetic treatment of text wrapping, are in the browser. This is why we see headline wrapping as in the following image: