word-break

Setting whether words should break.

Overview

Examples

Keep normal word boundaries

Use word-break:normal for standard language-aware wrapping.

<p class="word-break:normal">    Long words wrap at normal opportunities when the browser can find them.</p>

@layer utilities {    .word-break\:normal {        word-break: normal    }}

Break anywhere inside words

Use word-break:break-all for narrow columns where unbroken strings would otherwise overflow.

<p class="word-break:break-all">    pneumonoultramicroscopicsilicovolcanoconiosis</p>

This can make prose harder to read. Prefer overflow-wrap for user-generated URLs, hashes, or identifiers where emergency breaks are enough.

Keep CJK words together

Use word-break:keep-all when CJK text should avoid breaking between characters.

<p lang="ja" class="word-break:keep-all">CJK text without forced character breaks</p>

Use the break-word shortcut

Use break-word when you need the static shortcut for word-break: break-word.

<p class="break-word">very-long-unbroken-identifier</p>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="word-break:normal word-break:break-all@sm word-break:normal@print">...</div>

Choose the least aggressive breaking rule that prevents overflow.