juniorCSS
How do word-break and overflow-wrap differ?
Updated Apr 28, 2026
Short answer
overflow-wrap allows long words to break if they exceed their container, while word-break dictates the rules for breaking words anywhere.
Deep explanation
overflow-wrap: anywhere (or break-word) is usually preferred as it only breaks a word if there are no acceptable breakpoint characters (like hyphens or spaces). word-break: break-all will aggressively slice words exactly at the boundary edge regardless of readability.
Real-world example
Preventing a user from breaking a comment layout by posting a 200-character URL with no spaces.
Common mistakes
- Using `word-break: break-all` on standard paragraph text, causing normal English words to be cut arbitrarily at the end of lines.
Follow-up questions
- What is the hyphens property?