text-wrap: pretty
The text-wrap: pretty CSS declaration prioritizes better layout over speed when text is broken into multiple lines. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The text-wrap: pretty CSS declaration prioritizes better layout over speed when text is broken into multiple lines. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.text-wrap-style.pretty | 130 | 130 | | 26 | 130 | 26 |
| CSS property | ||||||
pretty | 117 | 117 | | 26 | 117 | 26 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
h1, h2, h3 {
text-wrap: pretty;
}Live demo
Use cases
Refine text rhythm
Use text-wrap: pretty to make long-form reading or dense interface copy easier to scan and understand.
Support language nuances
Apply text-wrap: pretty when different writing systems or typographic conventions need more deliberate control.
Cautions
- Test text-wrap: pretty in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.
Related links
Powered by web-features