Overflow Wrap
Controls word wrapping
Widely available
This feature is well established and works across many devices and browser versions.
| Class | Style |
|---|---|
ow-bw | overflow-wrap: break-word; |
ow-n | overflow-wrap: normal; |
Normal
Initial value
The browser will only break lines at allowed break points, and long words will overflow the container if they cannot fit.
The longest word entered in most standard English dictionaries is Pneumonoultramicroscopicsilicovolcanoconiosis with 45 letters.
<p class="fs-lg ta-c max-d-80 tc-slate o-auto ow-n">The longest word entered in most standard English dictionaries is Pneumonoultramicroscopicsilicovolcanoconiosis with 45 letters.</p>Break Word
The browser will break long words and wrap them onto the next line to prevent overflow.
The longest word entered in most standard English dictionaries is Pneumonoultramicroscopicsilicovolcanoconiosis with 45 letters.
<p class="fs-lg ta-c max-d-80 tc-slate ow-bw">The longest word entered in most standard English dictionaries is Pneumonoultramicroscopicsilicovolcanoconiosis with 45 letters.</p>Using utility variants
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Targeting different viewports
You can combine responsive breakpoints like sm:ow-*, md:ow-*, lg:ow-*, and xxl:ow-* to allow targeting specific utilities in different viewports.
Targeting hover states
Alternatively, you can apply :hover by using h:ow-* utility to override elements and change their values when hovering over them.