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?

More CSS interview questions

View all →