Text overflow
Utilities for controlling text overflow in an element.
Class reference
Truncate
Use truncate
to truncate overflowing text with an ellipsis (…
) if needed.
Overflow Ellipsis
Use overflow-ellipsis
to truncate overflowing text with an ellipsis (…
) if needed.
Overflow Clip
Use overflow-clip
to truncate the text at the limit of the content area.
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.
On this Page
v1.13.5