Overflow Wrap

Controls word wrapping

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.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg p-4 rad-1 ta-c tc-slate o-auto ow-n">Pneumonoultramicroscopicsilicovolcanoconiosis</p>
</div>

Break Word

The browser will break long words and wrap them onto the next line to prevent overflow.

<div class="bg-indigo-1 p-4 rad-1 ow-bw">
  <p class="bg-white fs-lg p-4 rad-1 ta-c tc-slate">Pneumonoultramicroscopicsilicovolcanoconiosis</p>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:ow-*, md:ow-*, lg:ow-*, and xxl:ow-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:ow-* utility to override elements and change their values when hovering over them.