Examples

Truncating text

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

Adding an ellipsis

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

Clipping text

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

This is the default browser behavior.

Responsive design

Prefix a text-overflow utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="text-ellipsis md:text-clip ...">
  Lorem ipsum dolor sit amet...
</p>

Learn more about using variants in the variants documentation.