📝 CSS word-break — Control How Words Break and Wrap
The word-break property controls how words should break when reaching the end of a line. It helps manage line breaking especially in cases of long words, URLs, or languages without spaces.
🔹 What Does word-break Do?
- Specifies if and how a word can be broken to wrap onto the next line.
- Useful for preventing overflow or awkward large gaps caused by unbreakable long words.
- Important for multilingual text handling (e.g., Chinese, Japanese).
📘 Syntax
selector {
word-break: normal | break-all | keep-all | break-word;
}
✅ Values Explained
| Value | Description |
|---|---|
normal | Default. Break words according to standard rules and line-breaking rules. |
break-all | Break words anywhere to prevent overflow, even within words. |
keep-all | Prevent breaks within words (except for CJK text). |
break-word | Allows breaking long words at arbitrary points, similar to break-all, but less aggressive.* |
* break-word is not part of the official CSS spec but is widely supported as a legacy alias for overflow-wrap: break-word.
✍️ Examples
1. Normal Word Break
p {
word-break: normal;
}
✅ Words break only at allowed break points (spaces, hyphens).
2. Break Anywhere to Avoid Overflow
p {
word-break: break-all;
}
✅ Long words or strings can break anywhere, preventing horizontal scrolling.
3. Keep Words Intact
p {
word-break: keep-all;
}
✅ Words don’t break except for CJK (Chinese, Japanese, Korean) text.
🖼️ Image Idea: Word Break Examples
Show the same paragraph with a very long word or URL:
- With
normal: word breaks only at spaces. - With
break-all: word breaks inside the long word. - With
keep-all: words don’t break at all, might overflow. - With
break-word: breaks words softly to avoid overflow.
💡 Use Cases
- Prevent horizontal overflow caused by long URLs or unbreakable strings.
- Control line breaks in Asian languages.
- Ensure clean, readable text layout on responsive designs.
- Complement with
overflow-wrapfor robust text wrapping.
✅ Summary
| Property | word-break |
|---|---|
| Purpose | Control line-breaking behavior inside words |
| Default value | normal |
| Common values | normal, break-all, keep-all, break-word (legacy) |
| Use cases | Wrapping long words, handling multilingual text |
🔚 Final Thought
word-break is essential for handling text overflow gracefully and maintaining readability, especially when dealing with unbreakable strings or complex languages.