Word‑Break & Overflow‑Wrap Playground

word-break controls how lines break within words during normal text flow. It applies to all text unconditionally. overflow-wrap (formerly word-wrap) only kicks in when a word is too long to fit in its container, acting as an emergency overflow prevention mechanism.

Think of it this way: word-break: break-all will aggressively break words everywhere to fill lines tightly, while overflow-wrap: break-word tries to keep words intact and only breaks them if they would otherwise overflow the container.

Use overflow-wrap: break-word for most general-purpose scenarios — it preserves readability by keeping words whole unless absolutely necessary. Ideal for user-generated content, comments, and articles.

Use word-break: break-all when you need tight text fitting in narrow columns, like data tables, code snippets, or East Asian typography where breaking anywhere is acceptable. Be aware this can make English text harder to read.

overflow-wrap: anywhere is similar to break-word, but with one key difference: it affects the min-content intrinsic size calculation. With anywhere, the browser considers that it can break at any point when calculating the minimum width. With break-word, the minimum width may still be based on the longest unbreakable word. This matters in flexbox and grid layouts where min-content is used.

Browser support for anywhere is good in modern browsers (Chrome 80+, Firefox 65+, Safari 15.4+).

word-break: keep-all prevents line breaks between characters in Chinese, Japanese, and Korean (CJK) text, forcing breaks only at spaces or punctuation. For English and other Latin-based languages, it behaves similarly to normal. It's particularly useful for CJK typography where you want words to stay grouped together rather than breaking between every character.

word-break: break-word is deprecated in the CSS Text Module Level 3 specification. It was an alias for overflow-wrap: break-word. While most browsers still support it for backwards compatibility, you should use overflow-wrap: break-word instead in new code. The deprecated value may be removed in future specification levels.

URLs and continuous strings (like file paths, code tokens, or very long words) are the most common overflow culprits. Without overflow-wrap: break-word or word-break: break-all, such strings will overflow their container. overflow-wrap: break-word is usually the best choice — it breaks the string only when needed, while keeping normal text readable. word-break: break-all works too but will also break normal words unnecessarily.

The white-space property handles whether text wraps at all. If white-space is set to nowrap or pre, text will not wrap regardless of word-break or overflow-wrap settings. For these wrapping properties to work, white-space must allow wrapping (e.g., normal, pre-wrap, or pre-line).

overflow-wrap: anywhere is supported in Chrome 80+, Edge 80+, Firefox 65+, Safari 15.4+, and Opera 67+. For older browsers, consider using overflow-wrap: break-word as a fallback:

.selector {
  overflow-wrap: break-word; /* Fallback */
  overflow-wrap: anywhere;
}

Yes, you can combine both properties. When both are set, word-break takes precedence for normal line-breaking decisions, while overflow-wrap handles overflow emergencies. A common safe combination is word-break: normal with overflow-wrap: break-word — this keeps normal text readable while preventing long strings from overflowing.