Text Overflow in Tailwind CSS (with Examples)

Last updated on June 10, 2022 Pennywise Loading... Post a comment

In Tailwind CSS, you can specify how hidden overflow text should be signaled to users by using the following utility classes:

  • truncate: Truncate the overflow content and automatically add an ellipsis (…) as needed
  • text-ellipsis: Display an ellipsis (…) to represent the clipped text (used with overflow-hidden)
  • text-clip: The text is clipped and not accessible (used with overflow-hidden)

Example

Screenshot:

The code:

<body class="bg-indigo-700 p-20 space-y-10">
    <div class="w-96 h-12 border border-white px-5 py-1">
        <!-- truncate -->
        <p class="text-white text-lg truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a
            gravida turpis. Ut nec ipsum vitae
            risus molestie pulvinar.</p>
    </div>
 
    <div class="w-96 h-12 border border-gree-300 px-5 py-1">
        <!-- text-ellipsis -->
        <p class="text-green-300 text-lg text-ellipsis overflow-hidden">
            abcdefghikjklmnopqajfdjfdjfdjfjdfjdjfdjfjdjfdjfdjafdfdfdfdapoooeoeoeooeoewwfdfdf</p>
    </div>

    <div class="w-96 h-12 border border-yellow-300 px-5 py-1">
        <!-- text-clip -->
        <p class="text-yellow-300 text-2xl text-clip overflow-hidden">thisisaverylongwordanditwillbecut</p>
    </div>
</body>

Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like