CSS Text-Wrap Table
| Piece | What it does | Field note |
|---|---|---|
text-wrap: balance | Even line lengths | The headline fix - browser minimizes the ragged edge, capped at 6 lines |
text-wrap: pretty | Kill orphan words | Avoids single-word last lines in PARAGRAPHS - body text's balance |
text-wrap: nowrap / wrap | The classics | Explicit no-wrap; wrap is the default flow |
text-wrap: stable | No rewrap on edit | Editing one line keeps OTHER lines identical - the contenteditable fix |
overflow-wrap: anywhere | Emergency breaks | Long URLs finally break - min-content sizing includes the breaks |
hyphens: auto | Real hyphenation | Needs lang attribute - the dictionary does the work |
white-space: pre-wrap | Preserve + wrap | User content with newlines renders as typed, still wraps longs |
line-height + max-width | The readable frame | 45-75 characters per line - typography before any wrapping tricks |
text-wrap grew real typography values: balance evens out headline line lengths (the ragged-edge fix), pretty prevents orphan single words on paragraph last lines, and stable keeps every OTHER line identical while one line is being edited - the contenteditable fix.
Bottom line: balance for headlines (it minimizes the ragged edge, capped at six lines for performance), pretty for body paragraphs (browsers delay the last line's break to avoid single-word orphans), and overflow-wrap: anywhere for the long-URL-in-a-narrow-column emergency.
The honest part: none of it rescues a 120-character line. The readable frame - 45 to 75 characters per line with line-height around 1.5 - is the typography that every wrapping trick depends on; balance and pretty polish a good frame, they do not replace one.
How to use
- Headlines get balance: h1, h2 { text-wrap: balance; } - the browser picks the break points that even out line lengths; only lines up to six lines are balanced.
- Paragraphs get pretty: p { text-wrap: pretty; } - no more single-word last lines ('orphan words') at the cost of slightly earlier breaks.
- URLs get an escape hatch: overflow-wrap: anywhere on user-content containers - long unbroken strings finally break instead of blowing out the layout.
Frequently asked questions
What is the difference between text-wrap: balance and pretty?
Target and scope. balance minimizes the RAGGEDNESS of all lines - it chooses break points so lines have similar lengths, which is what headlines want (a three-line title whose lines taper evenly looks designed) - and it is capped at six lines because the optimization is exponential and irrelevant beyond that. pretty optimizes the LAST LINE: it avoids leaving a single short word (an orphan) by pulling more text onto the final line - what body paragraphs want - across unlimited lines. The assignment: balance on headings, pretty on paragraphs; they are not interchangeable because a balanced paragraph looks stilted and a pretty headline barely changes.
Why does text-wrap: stable matter mostly for editable content?
Because it is about EDITING stability, not final beauty. Normal wrapping re-evaluates all line breaks as text changes - type one word in line one and every subsequent line re-flows, which makes live editing (contenteditable, comment boxes, collaborative docs) visually jump. stable freezes the break decisions of the lines BEFORE the cursor: typing on line three no longer re-wraps lines one and two. The result feels like a word processor instead of a slot machine. The secondary use: animated or progressively-revealed text, where stable prevents the re-wrap flicker as content streams in.
How do overflow-wrap and hyphens divide the emergency-break work?
Different fixes for different breakage. overflow-wrap: anywhere (or break-word) breaks an unbreakable STRING anywhere - the 200-character URL finally wraps instead of blowing out the container; it is a layout-safety valve, and the break has no hyphen (the URL is just cut). hyphens: auto enables REAL hyphenation - the browser's dictionary inserts language-correct hyphens at syllable boundaries for justified or narrow text - and it requires the lang attribute, because the dictionary is chosen by language. Together: hyphens: auto for prose in narrow columns (correct, readable breaks), overflow-wrap as the always-on insurance for unbreakable tokens users paste.
Why does line length matter more than any wrapping property?
Because readability lives in the frame. The research-backed comfortable line is 45-75 characters (about 30-50em at body sizes) with line-height around 1.5: shorter forces constant return sweeps, longer loses the reader's place on the return sweep - and no text-wrap value fixes either. The working setup: max-width in ch units (max-width: 65ch caps the measure regardless of font size), line-height: 1.5, and THEN balance/pretty refine how the lines within that frame break. The ch-unit trick is the modern answer to the old fixed-pixel content column - it scales with the font, which is exactly what a reading measure should do.