Word Break
How the browser splits words across lines when they are too long to fit in their container.
Plain English
Word break controls what happens when a single word is longer than its container — like a URL, a long technical term, or user-generated content. By default, browsers will not break words, so a long URL overflows its card and breaks the layout. Word-break: break-all or overflow-wrap: anywhere forces the browser to break the word at the container edge, keeping the layout intact.
Technical
Two main CSS properties: word-break (break-all: breaks at any character boundary; keep-all: never breaks CJK text) and overflow-wrap (word-wrap in older browsers — anywhere: breaks long words gracefully only when necessary; break-word: legacy equivalent). Prefer overflow-wrap: anywhere for general content and word-break: break-all specifically for URLs, API keys, and hash strings. Combine with hyphens: auto for editorial text.
Live Demo
Word break strategies
No breakhttps://design.example.com/components/typography/wordbreak?ref=playbook&v=2
Overflows container
break-allhttps://design.example.com/components/typography/wordbreak?ref=playbook&v=2
Breaks mid-character — ugly but contained
break-wordshttps://design.example.com/components/typography/wordbreak?ref=playbook&v=2
Breaks at word boundaries — cleanest
Use break-words for user content. Use break-all only for long strings like URLs.
Usage
✓ Good usage
Apply overflow-wrap: anywhere to user-generated content areas and word-break: break-all to URL or API key display elements to prevent layout overflow.
✗ Bad usage
Applying word-break: break-all to body paragraphs — words break in the middle of sentences, making text look like a broken teleprompter.
Recommended values
- overflow-wrap: anywhere — general content with unpredictable length
- word-break: break-all — URLs, API keys, hash strings, long codes
- hyphens: auto — editorial prose (requires lang attribute on html element)
- word-break: keep-all — CJK (Chinese/Japanese/Korean) text
Common mistakes
- Applying word-break: break-all to prose text — words break at arbitrary points mid-word.
- Forgetting to add hyphens: auto alongside break-word on editorial text — unhyphenated breaks look awkward.
- Not setting a lang attribute when using hyphens: auto — browsers need language context for correct hyphenation.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Apply overflow-wrap: anywhere to all card and list content to prevent long words breaking the layout. Apply word-break: break-all specifically to URL, API key, and hash display elements.