Tailwind CSS home page
  1. Typography
  2. Text Overflow

Quick reference

Class
Properties
truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-ellipsistext-overflow: ellipsis;
text-cliptext-overflow: clip;

Basic usage

Truncate

Use truncate to prevent text from wrapping and truncate overflowing text with an ellipsis (…) if needed.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis. 

<p class="truncate ...">...</p>

Ellipsis

Use text-ellipsis to truncate overflowing text with an ellipsis (…) if needed.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis. 

<p class="text-ellipsis overflow-hidden ...">...</p>

Clip

Use text-clip to truncate the text at the limit of the content area.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis. 

<p class="text-clip overflow-hidden ...">...</p>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:text-clip to only apply the text-clip utility on hover.

<p class="truncate hover:text-clip">
  <!-- ... -->
</p>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:text-clip to apply the text-clip utility at only medium screen sizes and above.

<p class="truncate md:text-clip">
  <!-- ... -->
</p>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.