Introduction
The text-wrap: balance property balances the number of characters per line, even with sufficient width.
This image effectively demonstrates this typographic feature.
This text layout is especially effective for displaying centered content, such as slogans and other elements on website homepages.
For example, the following GIF clearly demonstrates the significant improvement brought by the balance effect.
In the past, achieving such effects often required the use of the <wbr> tag.
Another Scenario
While the text-wrap property is meant to control text layout, it can actually be applied to any inline element.
We can now use text-wrap: balance to achieve layout effects that were previously difficult to implement.
For example, when showing user avatars for a ‘like’ feature, the layout might have looked like this: the first line could have many items, and the second line just a few, resulting in an uneven and unattractive layout, as shown below.
If we use the text-wrap: balance declaration, each line will have as many avatars as possible, providing a much better user experience, as seen in the image below.
Browser Compatibility and Polyfill
The text-wrap: balance property is part of the CSS Text Level 4 spec, which is fairly recent. Currently, it is supported only by Chrome and browsers using its engine.
Although compatibility is generally limited, Adobe offers a well-established polyfill solution.
You can find the project at git
The project currently has 1.3K stars and is compatible with Internet Explorer.