word-break: break-word
The word-break: break-word CSS declaration sets word breaks to occur according to their customary rules. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The word-break: break-word CSS declaration sets word breaks to occur according to their customary rules. 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.break-word Deprecated | 1 | 12 | 67 | 3 | 18 | 2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
/* Legacy (Deprecated) */
.break { word-break: break-word; }
/* Recommended */
.break { overflow-wrap: break-word; }Live demo
Use cases
Use word-break: break-word
Use word-break: break-word when the default CSS behavior is not expressive enough for the component or layout you are building.
Handle edge cases
Apply word-break: break-word to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test word-break: break-word 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
- Confirm that using word-break: break-word does not make content harder to perceive, understand, or operate in assistive contexts.
Related links
Powered by web-features