Overflow Wrap
Controls word wrapping
Widely available
This feature is well established and works across many devices and browser versions.
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 c-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 c-slate ow-bw">The longest word entered in most standard English dictionaries is Pneumonoultramicroscopicsilicovolcanoconiosis with 45 letters.</p>Using utility variants
Override existing utilities based on the user's screen size or other factors, such as hover states.
Responsive design
Target different screen sizes by adding breakpoint prefixes. Styles apply from the specified breakpoint and up.
Target specific viewport sizes with breakpoint prefixes
sm:ow-[value]md:ow-[value]lg:ow-[value]xxl:ow-[value]Hover state variant
Apply styles conditionally when users hover over an element using the h: prefix.
Add the h: prefix to apply styles only when the user hovers over the element.
h:ow-[value]