overflow-wrap
Allow emergency breaks and understand their effect on intrinsic width.
Overview
| Class | Declarations |
|---|---|
overflow-wrap:<value> | overflow-wrap: <value>;
|
wrap-break-word | overflow-wrap: break-word;
|
wrap-anywhere | overflow-wrap: anywhere;
|
wrap-normal | overflow-wrap: normal;
|
Examples
Break long unbroken content
wrap-break-word allows an otherwise unbreakable run to wrap when it would overflow. Ordinary words still use their normal boundaries.
<!-- wrap-normal --><div id="scrollport" role="region" aria-label="Emergency wrapping" tabindex="0" class="overflow:auto w:200px max-w:100%"> <p id="target" class="wrap-normal w:200px m:0 font-md leading:24px">pneumonoultramicroscopicsilicovolcanoconiosis</p></div><!-- wrap-break-word --><div id="scrollport" role="region" aria-label="Emergency wrapping" tabindex="0" class="overflow:auto w:200px max-w:100%"> <p id="target" class="wrap-break-word w:200px m:0 font-md leading:24px">pneumonoultramicroscopicsilicovolcanoconiosis</p></div>Generated CSS
@layer utilities { .wrap-break-word { overflow-wrap: break-word }}Allow breaks anywhere
wrap-anywhere and wrap-break-word both allow emergency breaks. Their intrinsic sizing differs: only anywhere counts those extra opportunities when calculating min-content width.
<!-- wrap-break-word --><code id="target" class="block wrap-break-word w:min-content m:0 font-md leading:24px">PREVIEW</code><!-- wrap-anywhere --><code id="target" class="block wrap-anywhere w:min-content m:0 font-md leading:24px">PREVIEW</code>These boxes deliberately use w:min-content. Compare the measured widths as well as the visible wrapping.
Restore normal wrapping
wrap-normal removes the emergency-break allowance. This child resets an inherited wrap-anywhere; the parent retains its own wrapping rule.
<!-- Inherited anywhere · local normal reset --><div class="wrap-anywhere"> <div id="scrollport" role="region" aria-label="Reset wrapping" tabindex="0" class="overflow:auto w:200px max-w:100%"> <p id="target" class="wrap-normal w:200px m:0 font-md leading:24px">pneumonoultramicroscopicsilicovolcanoconiosis</p> </div></div>If an unbroken run no longer fits, provide a suitable overflow strategy or keep emergency wrapping.
Apply conditionally
Resize the viewport to change the intrinsic width of the same min-content box. It uses wrap-break-word initially and wrap-anywhere at sm on screen.
<!-- One token · native intrinsic sizing --><code id="target" class="block wrap-break-word w:min-content m:0 font-md leading:24px wrap-normal@print wrap-anywhere@screen@sm">PREVIEW</code>Print restores normal wrapping. Use text-overflow when the design needs clipping instead of wrapping.