---
title: 'CSS Tips Part 2 - text-wrap: pretty will make your text feel intentional'
date: 2026-04-30
updated: 2026-06-23
excerpt: 'Go beyond balance. Learn how text-wrap: pretty improves readability, reduces awkward breaks, and makes your UI feel more polished.'
tags: [css, ux, typography]
canonical: https://mikebifulco.com/posts/text-wrap-pretty-for-subtle-visual-balance
---
# CSS Tips Part 2 - text-wrap: pretty will make your text feel intentional

> **TL;DR:** `text-wrap: pretty` tells the browser to avoid awkward line breaks, mostly orphaned words on the last line of a paragraph. Use it on body text (and `text-wrap: balance` on headings). Browser support is broad, the fallback is harmless, so there is no real downside.

## Part 2: A Slightly Smarter Wrap

In the last post, we talked about `text-wrap: balance` and how it makes headings feel cleaner and easier to read.

Where `balance` is perfect for making your headings feel cleaner and a little easier to read, `pretty` is here to make paragraphs feel *just right*.

In short: `text-wrap: pretty` helps make sure the last sentences in paragraphs don't end up with an orphaned word or two on their last line.

## What is text-wrap: pretty?

`text-wrap: pretty` is a newer CSS value that tells the browser to avoid awkward line breaks when wrapping text.

Instead of just filling lines as efficiently as possible, the renderer uses an algorithm to make better decisions about where lines should break, rather than the default behavior, which uses the "play it as it lies" approach you're probably familiar with.

Fundamentally, it means fewer orphaned words at the end of paragraphs, and fewer cases where multiple consecutive lines have hyphenated breaks.

It is subtle, but the end result is a lot more like hand-laid typography from the golden age of print.

### Why this matters: Better UX

Reading is not just about words. It is about flow.

When a line breaks in an awkward place, your brain has to do a tiny bit of extra work. That cost is small, but it adds up across a page.

Good typography removes friction.

This ties directly into a few UX principles:

- **Cognitive load**: Cleaner line breaks reduce micro-interruptions while reading
- **Orphan prevention**: Avoiding a single word stranded on its own line keeps the reader's eye moving naturally
- **Aesthetic usability effect**: Cleaner text feels easier to use, even if nothing else changed

Most people will never point at your site and say “nice line breaks.”

But they will feel the difference.

### Pretty vs Balance

These two are easy to confuse, but they solve different problems:

- `text-wrap: balance` → makes lines similar in length (great for **headings**)
- `text-wrap: pretty` → avoids awkward breaks (great for **paragraph text**)

## See it in action

On desktop, drag the slider to narrow the column. On mobile, tap the toggle and adjust width to compare — watch what happens to the last line of each paragraph.

## How to use it: CSS

```css
p {
  text-wrap: pretty;
}
```

That is it.

Like `balance`, this is one of those rare features that gives you a real UX improvement for almost no effort.

## How to use it: Tailwind

Tailwind now supports this as well:

```html
<p class="text-pretty">Your text here</p>
```

If you already adopted `text-balance` for headings, this pairs nicely with it.

## Can I use it yet?

In general, yes. According to [Can I Use](https://caniuse.com/wf-text-wrap-pretty), it is supported by most major browsers. The good news is that the fallback is harmless: the text will wrap as it normally would without the property.

So: go for it! Use this rule where it makes sense in your page designs. There's essentially no downside.

## FAQ

### What does text-wrap: pretty do?

It tells the browser to avoid awkward line breaks when wrapping text. Most
noticeably, it prevents a single orphaned word from being stranded on the
last line of a paragraph. The result feels closer to hand-laid print
typography.

### What is the difference between text-wrap: pretty and text-wrap: balance?

`text-wrap: balance` makes the lines in a block roughly equal in length,
which is great for **headings**. `text-wrap: pretty` avoids awkward breaks
and orphans, which is great for **paragraph / body text**. They solve
different problems and pair well together.

### Is text-wrap: pretty supported in all browsers?

It is supported in most major browsers. Where it is not, the fallback is
harmless: text simply wraps the way it normally would, so you can use it
safely without a polyfill. Check [Can I
Use](https://caniuse.com/wf-text-wrap-pretty) for the latest support.

### How do I use text-wrap: pretty with Tailwind CSS?

Tailwind ships a `text-pretty` utility, so you can write `<p
    class="text-pretty">`. It pairs nicely with `text-balance` for headings.

## Related Reading

- [W3C CSS Text Module Level 4: text-wrap](https://www.w3.org/TR/css-text-4/#text-wrap) official specification
- [Chrome Developer blog: Text Wrap Pretty](https://developer.chrome.com/blog/css-text-wrap-pretty)

## Part of the CSS For Visual Balance series

- [CSS Tips - text-wrap:balance will make your sites feel better](https://mikebifulco.com/posts/text-wrap-balance-will-make-your-designs-better)

Full series: https://mikebifulco.com/series/css-for-visual-balance

## More from mikebifulco.com

- [CSS talk: you should really know about the ch unit](https://mikebifulco.com/posts/all-about-ch)
- [You are not your user. Except when you are.](https://mikebifulco.com/newsletter/you-are-not-your-user)
- [Beyond Click Counts: Finding the Right Signals for Good Design](https://mikebifulco.com/newsletter/beyond-click-counts-good-signals-for-design-success)

---

Written by Mike Bifulco. Originally published at https://mikebifulco.com/posts/text-wrap-pretty-for-subtle-visual-balance