Word-break property
Last updated: 2026-09-13
word-break Word-break property
The word-break CSS property controls how words break at the container edge, mainly solving the problem of long words or URLs overflowing the container. It decides whether breaks are allowed inside words and how CJK text wraps. It is especially useful for long user-generated strings.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
word-break: normal | break-all | keep-all | break-word;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | break-all | keep-all | break-word | Keyword | Word breaking rules |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| word-break | ✓ v43 | ✓ v12 | ✓ v15 | ✓ v9 | ✓ v30 |
| Supported in all major browsers | |||||
Tip： break-all allows breaks between any characters, good for URLs and code; keep-all keeps CJK words intact and forbids breaking between characters.
Important： The break-word value has moved to the overflow-wrap property; it still works in word-break but is legacy syntax — prefer overflow-wrap: break-word.
❓ FAQ
QWhat is the difference between word-break and overflow-wrap?
Aword-break controls the rules for breaking inside words, while overflow-wrap (formerly word-wrap) controls whether an unbreakable long word may be broken at all. They are often combined: word-break: break-all forces breaks, while overflow-wrap: break-word keeps words intact when possible.
QWhich word-break value should be used for Chinese text in CSS?
AThe default normal works for Chinese, since Hanzi already break between characters. Use keep-all when you do not want English words in mixed text to be split, and break-all only for URLs or long words overflowing the container.
QWhat is the difference between break-all and break-word in CSS?
Abreak-all forces a line break between any two characters, cutting words at the container edge; break-word (now part of overflow-wrap) keeps words whole whenever possible and only breaks inside a word when a single word cannot fit. The former is aggressive, the latter friendlier.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
overflow-wrap property
Control the wrapping of long words.
white-space property
Control whitespace handling and wrapping.
