text-wrap: pretty by default

Set text-wrap: pretty at the root; opt out for live text.

Emil Kowalski@emilkowalski
I'm like 98% sure that you should set `text-wrap: pretty;` by default globally in your app. It gives you nicer line breaks (avoids orphans),which is what you want most of the time.
Sep 24, 2026Demo 1 ↓View on X ↗

From Emil’s posts; his follow-up notes it is untested at scale.

1 · Same text, same width

Drag the width or edit the text. Red marks an orphan.

text-wrap: wrapDefault

 
text-wrap: prettyGood

 
body {
  text-wrap: pretty;
}

2 · Opt out for streaming text

Stream a reply or type. Red marks words that jumped.

pretty, streamingBad

jumped: 0
wrap on streaming textGood

jumped: 0

.message[data-streaming],
[contenteditable],
textarea {
  text-wrap: wrap;
}

3 · Headings: three modes

Change the width or the heading text.

wrapOpt-out

prettyDefault

balanceShort headings

body { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.hero-lockup { text-wrap: wrap; }

Why it matters, pros and cons

Why it matters

Greedy wrapping strands one word on the last line. pretty fixes the ending.

Pros

  • One inherited line of CSS.
  • Fixes widths you never tested.
  • Unsupported browsers just wrap normally.

Cons

  • His hedge: 98% sure, not tested at scale.
  • Streaming text jumps; opt it out with wrap.
  • Short headings still want balance.