text overflow

Utilities for controlling how the text of an element overflows.

2025-04-09

Written by: tdtc

truncate

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Truncating text

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

<p class="truncate">The longest word in any of the major...</p>

Adding an ellipsis

Use the text-ellipsis utility to truncate overflowing text with an ellipsis (…) if needed:

<p class="overflow-hidden text-ellipsis">The longest word in any of the major...</p>

Clipping text

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

<p class="overflow-hidden text-clip">The longest word in any of the major...</p>

This is the default browser behavior.

Ref

• text overflow
• Responsive design