overflow-wrap
Controls whether long words wrap when they overflow the container. owbw is a safe choice for preventing overflow in user-generated content.
Class List
| Class | CSS | Description |
|---|---|---|
own | overflow-wrap: normal | only wraps at natural break points (default) |
owbw | overflow-wrap: break-word | wraps mid-word to prevent overflow |
owa | overflow-wrap: anywhere | similar to break-word but reflected in min-content calculation |
Visual Comparison
Compares the difference of each value by placing a long word in a narrow container.
Normal — own
long words overflow the container
Break Word — owbw
only overflowing words break mid-word
Anywhere — owa
similar to break-word but affects min-content
owbw vs wbba — Differences
owbw (overflow-wrap: break-word) and wbba (word-break: break-all) are similar but behave differently.
| owbw (overflow-wrap) | wbba (word-break) | |
|---|---|---|
| break timing | Breaks mid-word only when overflowing | Can break all words at character level |
| normal words | Breaks at natural positions | May break at character level |
| readability | High (preserves words) | Low (all words may break) |
| recommended use | User content, text with URLs | CJK mixed text, narrow columns |
Class Details
ownoverflow-wrap: normal
Default value. Only wraps at natural break points (spaces, hyphens). Long words may overflow the container.
<!-- Default: long words may overflow -->
<div class="own w20rem">
https://verylongdomainname.example.com/path/to/resource
</div>owbwoverflow-wrap: break-word
Only breaks words mid-word when they would overflow the container. Normal words wrap at natural positions, maintaining readability. Recommended for user-generated content.
<!-- Applied to user content -->
<div class="owbw w20rem">
https://verylongdomainname.example.com/path/to/resource
</div>
<!-- Comment area -->
<div class="owbw p16px bg18181B br8px">
Even if user-entered text contains long URLs or
continuous characters, it remains safe.
</div>owaoverflow-wrap: anywhere
Similar to owbw, but break points are also reflected in min-content calculations. Allows elements to shrink in flex/grid layouts.
<!-- Can shrink in flex context -->
<div class="df gap16px">
<div class="owa fg1 fb0">
Superlongwordthatmightoverflow
can also shrink in flex items
</div>
<div class="fg1 fb0">Side area</div>
</div>Tips & Notes
Use owbw for user content
Apply owbw by default to user input areas that may contain URLs or long words. Prevents layout breakage.
Combining with hyphens
Using owbw hya together automatically adds hyphens (-) when words are broken, improving readability.