Tailwind CSS Text Overflow

The Text Overflow Utility class is used for controlling how overflowing text is handled within an element.

Syntax

To apply the Text Overflow utility class, add the class overflow-{type} to any HTML element. Here, {type} can be one of the following values:

• ellipsis: To show an ellipsis when text overflows.
• clip: To simply clip the overflowing text.

<p class="overflow-ellipsis">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

Example

Let's consider a text that is overflowing from a paragraph element. We can control the overflow of text using the Text Overflow Utility class:

<p class="overflow-ellipsis w-64">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget felis magna. Vestibulum dictum, lorem sed pellentesque dictum, dui purus posuere odio, et imperdiet lacus erat aliquam massa. Donec pharetra justo quis massa faucibus, ut bibendum purus eleifend. Quisque in tincidunt justo. Vivamus eu lacinia nibh. Fusce tristique, augue eu lobortis lacinia, ex metus sagittis odio, quis ultricies odio ante eget mi. Nullam sed dolor turpis. Sed rhoncus, turpis ut ullamcorper viverra, eros tellus suscipit ligula, eget posuere sapien mauris non purus. Quisque in hendrerit metus.</p>

Output

The above example will display the text with an ellipsis and will be 64px wide:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget felis magna. Vestibulum...

Explanation

The overflow-ellipsis utility class is used to show an ellipsis when text overflows. Similarly, the overflow-clip utility class is used to simply clip the overflowing text.

Other utility classes like w-{size} can be used to set the width of the element.

Use

The Text Overflow Utility class is most commonly used in situations where we want to limit the length of the text and add an ellipsis(...) to indicate that the text has been truncated. Text Overflow is commonly used in grids, lists and within card components.

Important Points

• The Text Overflow Utility class can be used with Utility classes like width, height to apply constraints on the element.
• Text Truncation is not supported on all browsers.

Summary

The Text Overflow Utility class is used to control how overflowing text is handled within an element. The class can be used to show an ellipsis when text overflows or clip the text completely. Text Overflow is commonly used in grids, lists and within card components. Utility classes like w-{size} can be used to set the width of the element. Text Truncation is not supported on all browsers.