CSS text-wrap Playground

text-wrap is a CSS property introduced in 2023 that lets you control how the browser breaks lines inside a block of text. Its values include wrap (the default greedy algorithm), nowrap (force a single line), balance (distribute characters evenly across lines, ideal for headings), pretty (optimize the last few lines of a paragraph to avoid orphans), and stable (keep wrapping consistent as content changes — useful for live-edited content). It replaces tedious manual fixes like inserting <wbr>, &nbsp;, or running JavaScript libraries to balance headlines.

balance optimizes the entire block so every wrapped line has roughly the same width — best for short text like headlines, card titles, and tooltips (typically 1–6 lines). pretty optimizes only the last few lines of a longer paragraph to avoid orphans (a single trailing word on its own line) and improves hyphenation choices. Use balance for headings; use pretty for body copy. Internally, balance is computationally expensive (often O(n²) in break candidates), which is why browsers cap it at around six lines, while pretty is designed to scale to long-form content.

text-wrap: balance shipped in Chrome 114 (May 2023), Edge 114, Firefox 121 (Dec 2023), and Safari 17.5 (May 2024). text-wrap: pretty is newer — it shipped in Chrome 117 (Sep 2023), Edge 117, and Safari 17.5, but Firefox does not support it as of early 2026 and falls back to default wrapping. Always treat balance and pretty as progressive enhancements: the layout must remain readable when the values are ignored. The browser-support banner at the top of this page uses CSS.supports('text-wrap', 'pretty') to warn you if your current browser will not render the pretty column.

Use balance for any short, prominent block of text where ragged line lengths would look amateurish: H1 and H2 headings, card titles in a grid, hero subtitles, modal titles, tooltip bodies, button labels that wrap to two lines, and form labels above inputs. Avoid balance on body paragraphs (use pretty instead), on text that exceeds about six lines (the browser stops balancing past that point), and on text that animates frequently (the cost of recomputing balance on every frame can hurt performance).

Yes, but it is well-bounded. text-wrap: balance is O(n²) in the number of line-break candidates, so browsers limit it to around six wrapped lines (Chrome's default cap is 6, Firefox's is 10) and skip the optimization entirely on longer blocks. text-wrap: pretty is significantly cheaper — it only re-evaluates the last 4 lines of a paragraph by default, so its cost is constant regardless of paragraph length. For static content the cost is negligible; for content that reflows on every keystroke or animation frame, prefer pretty over balance, or apply balance only to the heading element.

text-wrap controls where line breaks may happen; the other three control how words break. Use hyphens: auto with text-wrap: pretty for the best paragraph readability — pretty will choose hyphenation points that minimize orphans. white-space: nowrap is the older equivalent of text-wrap: nowrap and still works; you can use either. overflow-wrap: anywhere lets very long unbreakable strings (URLs, long IDs) wrap mid-word as a last resort, regardless of the text-wrap value. The four properties are complementary, not competing.

Yes. This playground runs entirely in your browser using vanilla CSS and React state — no text, slider values, or generated CSS are ever sent to a server. The browser support banner uses the local CSS.supports() API, not a remote feature-detection service. There is no analytics tied to your input, and the page works offline once loaded, so you can paste sensitive draft copy or unreleased product names without leaving any trace.