word-break
Control ordinary word boundaries and character-level line breaking.
Overview
| Class | Declarations |
|---|---|
word-break:normal | word-break: normal;
|
word-break:break-all | word-break: break-all;
|
word-break:keep-all | word-break: keep-all;
|
break-word | word-break: break-word;
|
word-break:<value> | word-break: <value>;
|
Examples
Keep normal word boundaries
word-break:normal follows the language’s ordinary break opportunities. An unbroken Latin word can still overflow; scroll this named region to inspect the complete word.
<!-- Normal boundaries · unbroken word --><div id="scrollport" role="region" aria-label="Normal word boundaries" tabindex="0" class="overflow:auto w:200px max-w:100%"> <p id="target" class="w:200px m:0 font-md leading:24px word-break:normal">Inspect the word pneumonoultramicroscopicsilicovolcanoconiosis.</p></div>Generated CSS
@layer utilities { .word-break\:normal { word-break: normal }}Break anywhere inside words
word-break:break-all permits breaks within Latin words, even when an intact word could have moved to the next line. Compare it with emergency wrapping on the same text.
<!-- Emergency breaks only --><p id="target" class="wrap-anywhere w:160px max-w:100% m:0 font-md leading:24px word-break:normal">Make room for collaboration</p><!-- Break all --><p id="target" class="w:160px max-w:100% m:0 font-md leading:24px word-break:break-all">Make room for collaboration</p>Prefer overflow-wrap when ordinary word boundaries should be retained whenever they fit.
Keep CJK words together
word-break:keep-all suppresses breaks between CJK letters that normally allow them. The Chinese text below has no spaces; the kept run can overflow its narrow paragraph.
<!-- word-break:normal --><div id="scrollport" role="region" aria-label="Chinese line breaking" tabindex="0" class="overflow:auto w:160px max-w:100%"> <p id="target" lang="zh-Hant" class="w:160px m:0 font-md leading:24px word-break:normal">清晰的設計讓每個想法都有空間</p></div><!-- word-break:keep-all --><div id="scrollport" role="region" aria-label="Chinese line breaking" tabindex="0" class="overflow:auto w:160px max-w:100%"> <p id="target" lang="zh-Hant" class="w:160px m:0 font-md leading:24px word-break:keep-all">清晰的設計讓每個想法都有空間</p></div>Use the break-word shortcut
break-word emits the legacy word-break:break-word value. For new code, prefer the explicit combination word-break:normal wrap-anywhere.
<!-- break-word --><p id="target" class="w:200px max-w:100% m:0 font-md leading:24px break-word">pneumonoultramicroscopicsilicovolcanoconiosis</p><!-- word-break:normal wrap-anywhere --><p id="target" class="wrap-anywhere w:200px max-w:100% m:0 font-md leading:24px word-break:normal">pneumonoultramicroscopicsilicovolcanoconiosis</p>The explicit form preserves ordinary word boundaries and uses emergency breaks for the long token.
Apply conditionally
The same unbroken word uses normal boundaries at the base viewport, then breaks within the word at sm on screen. Print restores normal boundaries.
<!-- Real breakpoint · unchanged text --><div id="scrollport" role="region" aria-label="Responsive word breaking" tabindex="0" class="overflow:auto w:200px max-w:100%"> <p id="target" class="w:200px m:0 font-md leading:24px word-break:normal word-break:normal@print word-break:break-all@screen@sm">pneumonoultramicroscopicsilicovolcanoconiosis</p></div>