overflow-wrap

Controlling how words should break when they overflow their element

Overview

Examples

Break long unbroken content

Use wrap-break-word when long URLs, hashes, or generated identifiers should wrap only when needed to avoid overflow.

<p class="wrap-break-word">    https://example.com/releases/2026/very-long-generated-path</p>

@layer utilities {    .wrap-break-word {        overflow-wrap: break-word    }}

Allow breaks anywhere

Use wrap-anywhere for very narrow UI where even emergency wrapping should consider every character boundary.

<code class="wrap-anywhere">    7e9a41f817c928c6d9a4b6501f1e2bd6</code>

Restore normal wrapping

Use wrap-normal to undo an aggressive wrapping rule at a larger breakpoint or in print.

<p class="wrap-anywhere wrap-normal@md">    ...</p>

Compared with word-break, overflow wrapping is usually a gentler way to protect layouts from unbroken content.

Apply conditionally

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

<div class="wrap-break-word wrap-anywhere@sm wrap-normal@print">...</div>

Use overflow and text-overflow when content should be clipped instead of wrapped.