Modern CSS text-wrap is new in 2024
text-wrap is a CSS property introduced in 2024 that lets you choose how the browser breaks lines. The two interesting values are balance (for headings, make every line roughly equal length) and pretty (for paragraphs, avoid orphan words on the last line). Both eliminate the kind of typesetting awkwardness that previously required JavaScript or careful manual line breaks.
Browser support arrived in waves: Chrome shipped balance in version 114 (May 2023) and pretty in 117 (September 2023). Firefox shipped balance in 121 (December 2023). Safari shipped both in 17.5 (May 2024). As of 2026, support is over 92 percent globally for both values. The fallback is the default line-breaking algorithm, so the page still renders fine; it just loses the polish.
Hyphens for justified text
The CSS hyphens property controls whether the browser inserts hyphenation breaks inside long words. hyphens: auto turns on dictionary-based hyphenation using the language specified by the lang attribute. hyphens: manual respects only the soft-hyphen characters you have added by hand. hyphens: none disables hyphenation entirely. For long-form content in narrow columns, hyphens: auto is what makes justified text not look terrible.
Hyphenation depends on the lang attribute being set correctly. lang=en gets English hyphenation rules; lang=de gets German rules. Without lang, the browser may fall back to incorrect rules or skip hyphenation. The Tester surfaces this by letting you set the language live and see the effect.
Common Use Cases
Editorial publications use text-wrap balance on every headline to eliminate the embarrassing one-word last line. E-commerce product pages use text-wrap pretty on description paragraphs to keep the last line from being a stranded single word. Documentation sites use hyphens auto inside narrow code-example callouts to break long identifiers cleanly.
Internationalized content benefits the most. German and Finnish have very long compound words that overflow narrow columns without hyphenation. Setting the lang attribute correctly and enabling hyphens auto often fixes a layout problem that no amount of font tweaking can solve.
How We Compare
Most CSS tutorials introduce these properties one at a time. The Tester puts them side by side: type your text once and see how the same paragraph renders with balance versus pretty versus default, with hyphens on or off, with or without hanging-punctuation. Differences are obvious side by side that would be hard to spot one tab at a time.
Compared to inspecting paragraphs on real sites with DevTools and toggling properties, the Tester lets you load custom fonts and any column width, so you can rehearse the exact conditions of your design before shipping. The CSS output column shows the exact declaration you need.
Frequently Asked Questions
What is the difference between text-wrap balance and pretty?
balance distributes text evenly across every line in a block. It is ideal for headlines and titles where you want every line to be roughly the same length. pretty optimizes the last line specifically, preventing a single word from being stranded alone (a typographic orphan). It is ideal for body paragraphs. balance is more expensive to compute and the browser limits it to short blocks (six lines or less); pretty is cheaper and works on any length.
Is there a performance cost?
text-wrap balance is the only one with a noticeable cost because the browser tries multiple line-break options to find the most balanced layout. For headlines of one or two lines the cost is negligible. For body paragraphs longer than six lines, browsers fall back to the default algorithm to avoid the perf hit. pretty has minimal cost because it only optimizes the last line.
Do I need to set the lang attribute for hyphens to work?
Yes, in most browsers. Hyphens auto requires hyphenation dictionaries, and the browser picks the dictionary based on the lang attribute on the element or a parent. If lang is missing, Chrome typically falls back to English rules; Firefox may skip hyphenation entirely. Always set lang on the html element at minimum, and override it on specific elements when needed.
What is hanging-punctuation?
hanging-punctuation is a CSS property that pushes opening and closing punctuation marks slightly outside the text column, so the visual edge of the text aligns with the visible glyphs rather than with the punctuation. It is most useful for blockquotes that begin with quotation marks. Safari has supported it since 2016; Chrome and Firefox added support in 2024. Without it, a leading quote looks indented; with it, the text appears flush to the column edge.
Can I combine hyphens and text-wrap?
Yes, and they work together well. hyphens auto enables hyphenation breaks inside long words; text-wrap pretty optimizes line-break placement; combining them gives the browser more options to produce well-balanced lines. The Tester shows the combined effect so you can dial in the exact stack for your content.
Does text-wrap work on flex and grid children?
Yes, because text-wrap is a property of the text inside an element, not of the element layout. A flex item, a grid cell, a table cell, and a regular block all support text-wrap balance and pretty equally. The width of the container determines where lines break; text-wrap optimizes the break placement within that width.
What about non-Latin scripts like Arabic or CJK?
text-wrap balance and pretty work for any script. The line-breaking algorithm is script-aware. Hyphenation, however, is largely Latin-script-specific because most non-Latin scripts have different line-breaking conventions. CJK does not hyphenate; it breaks between any two characters. Arabic has its own rules. For non-Latin content, use text-wrap freely and skip hyphens.
Will old browsers break if I use these?
No. Unsupported CSS values are silently ignored. A browser that does not recognize text-wrap: balance falls back to text-wrap: wrap, which is the default line-breaking. The page renders without the polish but does not break. Same for hyphens auto and hanging-punctuation. This makes all three properties safe to ship without feature detection.