skip navigation

Text Wrap

Tagged in: typography

The new text-wrap property is great for balancing out headings that spread onto multiple lines.

h1, h2, h3 {
   text-wrap: balance;
}

This only works for 2 or 3 lines of text. For longer sections using text-wrap: pretty helps balance out the text so that there are no stray orphans (one word on it’s own) at the end of the block.

It takes the following values:

  • text-wrap: wrap
  • text-wrap: nowrap
  • text-wrap: balance
  • text-wrap: stable
  • text-wrap: pretty

The value of balance seems to be the one most useful.

☝