The word-break property controls how lines break within words, especially important for CJK (Chinese, Japanese, Korean) text and URLs. Here's how to use it.
Basic Values
Loading code block...
Normal vs Break-All
Loading code block...
CJK Text Handling
Loading code block...
Overflow Handling
Loading code block...
Table Cells
Loading code block...
Code and URLs
Loading code block...
Email Addresses
Loading code block...
Card Layouts
Loading code block...
Chat and Messages
Loading code block...
Form Labels
Loading code block...
Navigation
Loading code block...
Responsive Considerations
Loading code block...
Combining Properties
Loading code block...
Internationalization
Loading code block...
Flexbox and Grid
Loading code block...
Best Practices
General Usage:
✓ Use normal as default
✓ Add overflow-wrap: break-word
✓ Consider hyphens: auto
✓ Test with long content
Specific Cases:
✓ URLs: break-all or overflow-wrap: anywhere
✓ Code: pre-wrap with break-word
✓ CJK: keep-all for Korean
✓ User content: robust handling
Layout:
✓ Set min-width: 0 in flex/grid
✓ Use table-layout: fixed
✓ Consider max-width constraints
✓ Test narrow containers
Avoid:
✗ break-all for prose text
✗ Ignoring CJK languages
✗ Missing overflow handling
✗ Breaking numeric data
Conclusion
The word-break property controls how lines break within words. Use normal for most content, break-all for URLs and technical strings, and keep-all for Korean text. Combine with overflow-wrap: break-word for robust handling and hyphens: auto for better readability. Always set min-width: 0 on flex and grid items to enable proper word breaking.