word-break
The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 15 | 3 | 18 | 2 | |
break-all | 1 | 12 | 15 | 3 | 18 | 2 |
keep-all | 44 | 12 | 15 | 9 | 44 | 9 |
normal | 1 | 12 | 15 | 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
/* Allow line breaks between all characters */
.break-all {
word-break: break-all;
}
/* Keep words together in CJK text */
.keep-all {
word-break: keep-all;
}Live demo
Use cases
-
Narrow mobile layouts
Prevent long strings from breaking cards or tables when available width is limited.
-
Multilingual content
Adjust line-breaking behavior for languages that have different expectations from Latin text.
Cautions
- Overusing break-all can make Latin text significantly harder to scan.
- Line-breaking rules should match the language and content type, not just the container width.
Accessibility
- Readable line breaks matter for cognitive load and zoomed interfaces.
- Choose break behavior that preserves comprehension instead of simply forcing text to fit.