word-break: auto-phrase
The word-break: auto-phrase CSS declaration specifies that wrapping should occur at natural phrase boundaries, especially in CJK languages. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The word-break: auto-phrase CSS declaration specifies that wrapping should occur at natural phrase boundaries, especially in CJK languages. 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.word-break.auto-phrase Experimental | 119 | 119 | | | 119 | |
- This value is only applicable if `lang="ja"` is specified. This value has no effect on other locales.
- This value is only applicable if `lang="ja"` is specified. This value has no effect on other locales.
- This value is only applicable if `lang="ja"` is specified. This value has no effect on other locales.
Syntax
.japanese-text {
word-break: auto-phrase;
}Live demo
Use cases
Refine text rhythm
Use word-break: auto-phrase to make long-form reading or dense interface copy easier to scan and understand.
Support language nuances
Apply word-break: auto-phrase when different writing systems or typographic conventions need more deliberate control.
Cautions
- Test word-break: auto-phrase 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