Making Text Look Nicer with text-wrap

Ever noticed how sometimes text just doesn't look quite right? Maybe a headline breaks awkwardly on mobile, or you get that annoying single word hanging at the end of a paragraph. The CSS text-wrap property helps solve these issues with two values that each handle different scenarios.

Balance for Headlines

So for all headlines it's a good idea to use text-wrap: balance, especially when those titles are a bit longer. This will ensure your headlines break into lines that look visually balanced, rather than ending up with one long line and one short word. Checkout the examples below to see the difference.

Try resizing your browser window to see how the text reflows differently with and without balance.

Whether you're using plain CSS or Tailwind, here's how to use it:

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

It works best with 2-3 lines and has a limit of 6 lines. While it does need some computational power to calculate these balanced lines, I think it's worth it for headlines. They're usually the first thing people read, so they should look good.

Pretty for Paragraphs

For longer text, there's text-wrap: pretty. Unlike balance which aims for equal line lengths, pretty takes a more nuanced approach. Instead of the usual line-by-line breaking that browsers do, it looks at the whole paragraph to make smarter decisions about line breaks.

Try resizing your browser window to see how the text reflows differently with and without pretty.

This is how you can use it within CSS or Tailwind:

p {
  text-wrap: pretty;
}

The most noticeable improvement is preventing single words at the end of paragraphs. Yes, it's a bit slower than normal text wrapping, but on sites where reading is the main activity, I believe better typography is worth the small performance trade-off.

Wrapping Up 🌯

We started with awkward headlines and lonely hanging words - both fixed with two simple CSS values for text-wrap. While browser support varies (balance at 86.84% and pretty at 72.3%), unsupported browsers just fall back to their default text wrapping. Nothing breaks, your text just looks better for most of your readers.