Compare hyphens, word-break, overflow-wrap, and line-break side-by-side on the same text at the same column width. Tune hyphenate-character, hyphenate-limit-chars, and see where the browser actually breaks the long word that's blowing your layout.
Format: total before after — min word length, min chars before break, min chars after. Default auto uses UA values (typically 5 2 2).
All boxes share the same text and column width. Red text means the word overflowed its container.
Picks a safe "wrap anything" recipe that handles both natural words and unbreakable strings like URLs.
| Property | Does what | Notes |
|---|---|---|
hyphens | none never; manual only at ­ / U+00AD; auto dictionary-based. | Needs lang for auto. Each browser ships its own hyphenation dictionaries. |
word-break | normal default; break-all mid-word in CJK + non-CJK; keep-all never breaks CJK; break-word legacy alias for overflow-wrap: anywhere. | Was originally CSS3 Text Level 3 for CJK; break-all hurts Latin readability. |
overflow-wrap(alias word-wrap) | normal only at break opportunities; break-word breaks mid-word if it would overflow but doesn't affect line-box sizing; anywhere same but min-content shrinks to single glyph. | anywhere = grid/flex shrink-fit. break-word = visual only. |
line-break | auto; loose permissive; normal; strict stricter rules for CJK punctuation; anywhere can break between any two typographic units. | Mostly affects CJK punctuation placement. |
hyphenate-character | The glyph shown at a hyphenation break. Default auto = U+2010 hyphen. | Can be any string, e.g. "~". |
hyphenate-limit-chars | 3 numbers: total before after. Minimums for word length and characters on each side of the break. | auto auto auto uses UA defaults. |
| Wrap anything safely (URLs, IDs, words) | overflow-wrap: anywhere; word-break: normal; |
| Pretty prose, hyphenated | hyphens: auto; + lang="…" on the root. |
| CJK without breaking Western words mid-letter | word-break: keep-all; + overflow-wrap: anywhere; |
| Force-wrap code-like identifiers | overflow-wrap: anywhere; word-break: break-word; |
| Avoid orphans/widows but allow break | hyphens: auto; hyphenate-limit-chars: 6 3 3; |
hyphens: auto — Chrome 88+ (with built-in dictionaries), Safari 5.1+, Firefox 6+ (per-language). Edge 79+.overflow-wrap: anywhere — All evergreen browsers.word-break: keep-all — All evergreen browsers.hyphenate-character, hyphenate-limit-chars — Chrome 109+, Safari 17+, no Firefox yet (use -webkit-hyphenate-character & the limit attrs gracefully degrade).line-break — All evergreen browsers (CJK behaviour varies).