You all may have experienced this issue like we have were you want to add Ellipsis using Tailwind. Clear answer there is no such class that you can add currently to achieve that. There is an open issue on the official github account regarding the same.

So either you can write your own css class for it. "Max Character Length with Ellipsis Using CSS", See this article to find some hacks here is my favourite.

p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Solution

There is another cool way btw, using a tailwind plugin. @tailwindcss/line-clamp, is plugin to do Multi-line truncation in tailwind.

To install it

npm install @tailwindcss/line-clamp

then add this to your tailwind.config.js

module.exports = {
  // ...
  plugins: [
    // ...
    require('@tailwindcss/line-clamp'),
  ],
}

after that you can access to all the classes to do line clipping, just use following code snippet to try it out.

<p class="line-clamp-3">
  Here's a block of text from a blog post that isn't conveniently three lines long like you designed
  for originally. It's probably like 6 lines on mobile or even on desktop depending on how you have
  things laid out. Truly a big pain in the derriere, and not the sort of thing you expected to be
  wasting your time trying to deal with at 4:45pm on a Friday am I right? You've got tickets to
  SmackDown and you heard there's gonna be a dark match with that local guy from two towns over that
  your cousin went to high school with before the show starts, and you're gonna miss it if you're
  not there early.
</p>

All classes you can use now.

Now you can create the perfect layouts like we did.

That's it for now. We will see you in our next article real soon. Meanwhile checkout our new product "Dollar Tailwind". 200+ Tailwind compoments worth 400$ now get it in just 99$.