Quick reference
| Class | Properties |
|---|---|
.text-truncate | text-overflow: ellipsis; overflow: hidden; white-space: nowrap; |
.text-ellipsis | text-overflow: ellipsis; |
.text-clip | text-overflow: clip; |
Basic usage
Truncate
Use text-truncate to truncate overflowing text with an ellipsis (…) if needed.
Only working for display: inline-block or display: block.
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-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>