Text Overflow

Controls how hidden text overflow content is displayed.

Class	Style
`to-c`	`text-overflow: clip;`
`to-e`	`text-overflow: ellipsis;`

Clip

Initial value

The text will be clipped at the edge of the container without any indication that it has been cut off.

WIP

<div class="bg-indigo-1 p-4 rad-1">
  <div class="bg-white rad-1">
    <p class="fs-lg o-h p-4 tc-slate to-c w-25 ws-nw">Pneumonoultramicroscopicsilicovolcanoconiosis</p>
  </div>
</div>

Ellipsis

The text will be truncated with an ellipsis at the end to indicate that there is more content that is not visible.

WIP

<div class="bg-indigo-1 p-4 rad-1">
  <div class="bg-white rad-1">
    <p class="fs-lg o-h p-4 tc-slate to-e w-25 ws-nw">Pneumonoultramicroscopicsilicovolcanoconiosis</p>
  </div>
</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:to-*, md:to-*, lg:to-*, and xxl:to-* to allow targeting specific utilities in different viewports.

Using hover states

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