New text-wrap values available

Text wrapping and hyphenation are something that constantly come up when working on websites.

Text-wrap is a CSS shorthand that controls how text inside an element will be wrapped. The different values provide typographic improvements, and the possibility of turning wrapping off. Text-wrap influences how the browser chooses between normal wrap opportunities.

Text-wrap: balance

The 'balance' option wraps the text in a way that balances the number of characters on each line.

This is only supported for blocks of text spanning a limited number of lines: six or fewer for Chromium and ten or fewer for Firefox. The reason for this is that counting characters and balancing them across multiple lines is computationally expensive.

The support is good across all major browsers.

Text-wrap: pretty

The 'pretty' option aims to improve readability. It chooses line breaks more carefully so that lines will flow better.
The results are similar to the 'wrap' value, but the user agent will use a slower algorithm, which favours better layout over speed.

This can be used for body copy.

Currently, there is limited availability. At the time of writing, there is no support in Firefox.

Take a look at a CodePen example to see these in action.

Other values for text-wrap

You probably have heard of the other values, but here is a recap of them as well.
There are examples of all the values on MDN.

Text-wrap: wrap

Text is wrapped across lines to minimise overflow. 'Wrap' is the default value for text-wrap.

Text-wrap: nowrap

Text doesn't wrap across lines. It will overflow its containing element rather than breaking onto a new line. This is usually not very good for accessibility.

Text-wrap: stable

This behaves similarly to 'wrap'. The difference is that when the user is editing the content, the lines that are before the lines being edited remain static. The aim is not to have the whole block of text rewrap while editing.

When should you use these?

Use text-wrap: balance for short text blocks where the line breaks affect the visual rhythm. Things like headings, hero text, quotes and card titles.

Use text-wrap: pretty for longer, readable text when improved typography is more important than layout performance.  You can use it, but it's important to remember that browsers that support it can improve line breaks, and browsers that don't support it will use normal wrapping.

Use text-wrap: stable mainly for editable. content. Because it's meant to reduce distracting layout shifts while the user is editing text.

I would mostly avoid text-wrap: nowrap. It can be useful for small interface labels or pieces of text that should stay together. But it can also cause overflow and horizontal scrolling. That can become a problem, especially when users zoom in, use larger text or view the page on a narrow screen.