# Text Wrapping

> Balanced headings, no lonely last words.

- Section: Typography
- URL: https://critly.vercel.app/text-wrapping
- Published: 2026-07-14
- Source: https://github.com/kausthubh-coder/critly/blob/main/content/typography/text-wrapping.mdx

Browsers wrap text greedily. Each line takes as many words as fit, then
breaks. That is fast, but it often leaves one word alone on the last line of a
heading.

**Balance short text and make long text pretty.**

> **Interactive demo: Text Balance.** Open https://critly.vercel.app/text-wrapping to try it.

`text-wrap: balance` looks at the whole block and picks breaks that make every
line about the same length. Use it on headings, card titles, toasts and empty
states. Chrome only balances blocks of six lines or fewer and Firefox ten, so
it is not meant for long text anyway.

## Paragraphs

Balancing a paragraph would leave a ragged block with short lines everywhere.
`text-wrap: pretty` keeps the normal wrapping and only steps in to avoid a
very short last line.

> **Interactive demo: Text Pretty.** Open https://critly.vercel.app/text-wrapping to try it.

The two browsers that support it go about it differently. Chrome adjusts the
last four lines of a paragraph. Safari, since version 26, evaluates the whole
paragraph and also evens out the rag. Firefox does not support `pretty` yet,
so both paragraphs above look the same there.

Every paragraph on this site uses it.

## Usage

**Tailwind**

```html
<h2 class="text-balance">Your export is ready to download</h2>

<p class="text-pretty">
  Exports now run in the background, so you can keep working.
</p>
```

**CSS**

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

p, li {
  text-wrap: pretty;
}
```

Both values are progressive enhancement. A browser that does not understand
them falls back to normal wrapping, so you can set them once in your base
styles and stop thinking about them.

## Resources

- [CSS text-wrap balance](https://developer.chrome.com/docs/css-ui/css-text-wrap-balance): Chrome's write-up of how balancing works and where it stops.
- [Better typography with text-wrap pretty](https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/): WebKit on how Safari's pretty looks at the whole paragraph, and how that differs from Chrome.
- [text-wrap-style](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-wrap-style): The values, their line limits, and browser support on MDN.
- [Details that make interfaces feel better](https://jakub.kr/writing/details-that-make-interfaces-feel-better): Jakub Krehel's list of small fixes, which opens with these two values.