text-wrap: pretty asks the browser to spend more work on soft line breaks to avoid awkward endings in longer text. balance aims for more even short lines and is often used for headings; stable favors lines that do not shift above an edit point in editable text. None of these values inserts editorial line breaks or rewrites the copy.
Make this comfortable
CSS text-wrap: pretty: spend line-breaking work where copy merits it
When to use it
A case-study introduction has a narrow measure and a final line that repeatedly contains one stranded word. The introduction is short and static, so the page applies pretty there while leaving a long activity feed on ordinary wrap. Its title uses an existing balance rule, and an editable note field is not given pretty because reflow during typing would be distracting. Test the introduction with several localized lengths, the fallback font, and the widths around the page's responsive changes. Browser algorithms can differ; the result is an optional typography improvement rather than a guaranteed exact line arrangement. If a legally significant phrase must stay together, edit the content or markup deliberately instead of assuming pretty will preserve it. Avoid hard-coded break elements purely to match a desktop screenshot; they can create poor lines on a phone. The sample keeps an ordinary wrap declaration first so engines that do not recognize pretty still render readable text.
.case-study__intro { max-inline-size: 62ch; text-wrap: wrap; text-wrap: pretty; }
.case-study__activity { text-wrap: wrap; }
.case-study__editable-note { text-wrap: stable; }Cost and verification
Better line breaking can require more layout work than default wrapping. Scope pretty to a small static region where the improvement is visible, and measure if repeated across a long feed or many cards. The browser remains free to choose its algorithm, so snapshots may differ across engines and fonts. The 62ch measure is a starting point for this article, not a universal reading width; test translations and user font enlargement. Text-wrap controls soft breaks, not overflow from an unbreakable code token. Such tokens still need an appropriate wrapping or scrolling policy. In editable text, stable may reduce distracting reflow, but it also needs browser checks and must not hide content.
Common Mistakes
- Do not apply pretty to every paragraph solely for visual polish.
- Do not expect identical line breaks across browsers and fonts.
- Do not use pretty as a fix for long unbreakable identifiers.
Connected lessons
css
reference
web