Text Overflow in Tailwind CSS (with Examples)

Updated: June 10, 2022 By: Pennywise 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)



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 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">

    <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>

Further reading:

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

Notify of
Inline Feedbacks
View all comments

Related Articles