Text overflow

Class reference

# Truncate

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

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

# Overflow Ellipsis

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

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

# Overflow Clip

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

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

# Responsive

To control the text overflow in an element only at a specific breakpoint, add a {screen}: prefix to any existing text overflow utility. For example, adding the class md:overflow-clip to an element would apply the overflow-clip utility at medium screen sizes and above.

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

For more information about Elements’ responsive design features, check out the Responsive Design documentation.