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#
1/* Normal word breaking rules */
2.normal {
3 word-break: normal;
4}
5
6/* Break words anywhere */
7.break-all {
8 word-break: break-all;
9}
10
11/* Keep words together (CJK) */
12.keep-all {
13 word-break: keep-all;
14}
15
16/* Break at word boundaries, then anywhere */
17.break-word {
18 overflow-wrap: break-word;
19 /* word-break: break-word is deprecated */
20}Normal vs Break-All#
1/* Normal - breaks at word boundaries */
2.container {
3 width: 200px;
4 word-break: normal;
5}
6/* Long words overflow the container */
7
8/* Break-all - breaks anywhere */
9.container-break {
10 width: 200px;
11 word-break: break-all;
12}
13/* Long words break mid-word to fit */
14
15/* Example with long URL */
16.url-display {
17 width: 300px;
18 word-break: break-all;
19 /* https://example.com/very/long/path/to/resource breaks cleanly */
20}CJK Text Handling#
1/* Normal behavior for CJK */
2.cjk-normal {
3 word-break: normal;
4 /* Chinese/Japanese/Korean can break between any characters */
5}
6
7/* Keep CJK words together */
8.cjk-keep {
9 word-break: keep-all;
10 /* Breaks only at punctuation or spaces */
11 /* Useful for Korean which has clear word boundaries */
12}
13
14/* Mixed content */
15.mixed-content {
16 word-break: normal;
17 /* English breaks at words */
18 /* CJK breaks between characters */
19}Overflow Handling#
1/* Prevent overflow with word-break */
2.prevent-overflow {
3 width: 100%;
4 max-width: 300px;
5 word-break: break-all;
6 overflow-wrap: break-word; /* Fallback */
7}
8
9/* With hyphens for better readability */
10.with-hyphens {
11 width: 300px;
12 word-break: normal;
13 overflow-wrap: break-word;
14 hyphens: auto;
15}
16
17/* Hide overflow as last resort */
18.truncate {
19 width: 300px;
20 white-space: nowrap;
21 overflow: hidden;
22 text-overflow: ellipsis;
23}Table Cells#
1/* Tables often need word-break */
2table {
3 table-layout: fixed;
4 width: 100%;
5}
6
7td {
8 word-break: break-all;
9 overflow-wrap: break-word;
10}
11
12/* Better table cell handling */
13.data-cell {
14 word-break: normal;
15 overflow-wrap: break-word;
16 max-width: 200px;
17}
18
19/* Numeric data - don't break */
20.numeric-cell {
21 word-break: normal;
22 white-space: nowrap;
23}Code and URLs#
1/* Code blocks */
2code {
3 word-break: normal;
4 overflow-wrap: break-word;
5}
6
7pre {
8 white-space: pre-wrap;
9 word-break: normal;
10 overflow-wrap: break-word;
11}
12
13/* URLs */
14.url {
15 word-break: break-all;
16 /* Breaks long URLs anywhere */
17}
18
19/* Better URL handling */
20.url-smart {
21 word-break: normal;
22 overflow-wrap: anywhere;
23 /* Breaks at natural points first, then anywhere */
24}Email Addresses#
1/* Email display */
2.email {
3 word-break: break-all;
4}
5
6/* Email with better breaks */
7.email-smart {
8 word-break: normal;
9 overflow-wrap: anywhere;
10}
11
12/* In narrow containers */
13.narrow-email {
14 max-width: 150px;
15 word-break: break-all;
16 font-size: 0.9em;
17}Card Layouts#
1/* Card with potential overflow */
2.card {
3 width: 250px;
4 padding: 1rem;
5}
6
7.card-title {
8 word-break: normal;
9 overflow-wrap: break-word;
10 hyphens: auto;
11}
12
13.card-description {
14 word-break: normal;
15 overflow-wrap: break-word;
16}
17
18/* Card with user-generated content */
19.user-content {
20 word-break: break-word; /* Legacy support */
21 overflow-wrap: break-word;
22}Chat and Messages#
1/* Chat bubble */
2.message {
3 max-width: 80%;
4 padding: 0.75rem 1rem;
5 border-radius: 1rem;
6 word-break: normal;
7 overflow-wrap: break-word;
8}
9
10/* Message with possible long content */
11.message-content {
12 word-break: break-word;
13 white-space: pre-wrap;
14}
15
16/* Usernames that might be long */
17.username {
18 max-width: 120px;
19 word-break: break-all;
20 overflow: hidden;
21 text-overflow: ellipsis;
22}Form Labels#
1/* Form field labels */
2.form-label {
3 word-break: normal;
4 overflow-wrap: break-word;
5}
6
7/* Compact form layout */
8.compact-label {
9 max-width: 100px;
10 word-break: break-all;
11 font-size: 0.875rem;
12}
13
14/* Error messages */
15.error-message {
16 word-break: normal;
17 overflow-wrap: break-word;
18 color: #dc2626;
19}Navigation#
1/* Navigation items */
2.nav-item {
3 word-break: normal;
4 white-space: nowrap;
5}
6
7/* Vertical navigation with wrapping */
8.sidebar-nav-item {
9 word-break: normal;
10 overflow-wrap: break-word;
11 padding: 0.5rem 1rem;
12}
13
14/* Breadcrumbs */
15.breadcrumb-item {
16 word-break: normal;
17 overflow: hidden;
18 text-overflow: ellipsis;
19 max-width: 150px;
20}Responsive Considerations#
1/* Different behavior by screen size */
2.responsive-text {
3 word-break: normal;
4 overflow-wrap: break-word;
5}
6
7@media (max-width: 480px) {
8 .responsive-text {
9 word-break: break-all;
10 /* More aggressive breaking on small screens */
11 }
12}
13
14/* Flexible container */
15.flexible-content {
16 min-width: 0; /* Important for flexbox */
17 word-break: normal;
18 overflow-wrap: break-word;
19}
20
21/* Grid item */
22.grid-item {
23 min-width: 0; /* Important for grid */
24 word-break: normal;
25 overflow-wrap: break-word;
26}Combining Properties#
1/* Comprehensive text handling */
2.robust-text {
3 /* Primary word breaking */
4 word-break: normal;
5
6 /* Fallback for long words */
7 overflow-wrap: break-word;
8
9 /* Add hyphens where supported */
10 hyphens: auto;
11 -webkit-hyphens: auto;
12
13 /* Prevent text selection issues */
14 word-spacing: normal;
15}
16
17/* For code/technical content */
18.technical-text {
19 word-break: break-all;
20 overflow-wrap: anywhere;
21 hyphens: none;
22 font-family: monospace;
23}
24
25/* For prose content */
26.prose {
27 word-break: normal;
28 overflow-wrap: break-word;
29 hyphens: auto;
30 text-align: justify;
31 text-justify: inter-word;
32}Internationalization#
1/* Korean text */
2:lang(ko) {
3 word-break: keep-all;
4}
5
6/* Japanese text */
7:lang(ja) {
8 word-break: normal;
9 /* Japanese breaks naturally between characters */
10}
11
12/* Chinese text */
13:lang(zh) {
14 word-break: normal;
15 /* Chinese breaks naturally between characters */
16}
17
18/* Thai text (no spaces between words) */
19:lang(th) {
20 word-break: normal;
21 /* Let browser handle Thai word boundaries */
22}Flexbox and Grid#
1/* Prevent flex items from overflowing */
2.flex-container {
3 display: flex;
4 gap: 1rem;
5}
6
7.flex-item {
8 min-width: 0; /* Critical! */
9 word-break: normal;
10 overflow-wrap: break-word;
11}
12
13/* Grid with auto columns */
14.grid-container {
15 display: grid;
16 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
17 gap: 1rem;
18}
19
20.grid-item {
21 min-width: 0; /* Critical! */
22 word-break: normal;
23 overflow-wrap: break-word;
24}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.