Text Overflow

Utility	Properties
to-c	text-overflow: clip;
to-e	text-overflow: ellipsis;

Clip

This example sets the text overflow to clip. The text will be clipped at the edge of the container without any indication that it has been cut off.

Pneumonoultramicroscopicsilicovolcanoconiosis

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

Ellipsis

This example sets the text overflow to ellipsis. The text will be truncated with an ellipsis (...) at the end to indicate that there is more content that is not visible.

Pneumonoultramicroscopicsilicovolcanoconiosis

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

Conditional styles

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

Media modifiers

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

<div class="to-c md:to-e ..."></div>

Hover modifiers

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

<div class="to-c h:to-e ..."></div>