CSS word-break Property Guide

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.

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

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.

CSS word-break Property Guide

Basic Values#

Normal vs Break-All#

CJK Text Handling#

Overflow Handling#

Table Cells#

Code and URLs#

Email Addresses#

Card Layouts#

Chat and Messages#

Form Labels#

Navigation#

Responsive Considerations#

Combining Properties#

Internationalization#

Flexbox and Grid#

Best Practices#

Conclusion#

Share this article

Related articles

Modern CSS Reset and Base Styles

CSS clamp(), min(), and max() Functions

CSS Writing Modes