Text Overflow and Truncation

Utilities for controlling text overflow and truncation.

Class Name	CSS Equivalent
.text-clip	text-overflow: clip;
.text-ellipsis	text-overflow: ellipsis;
.truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

Truncate

Use truncate 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="[...] 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>