![](https://authors.xenox.dev/content/images/2022/01/Screenshot-2022-01-27-at-6.47.00-PM.png)
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.
![](https://authors.xenox.dev/content/images/2022/01/Screenshot-2022-01-27-at-7.00.27-PM.png)
Now you can create the perfect layouts like we did.
![](https://authors.xenox.dev/content/images/2022/01/image.png)
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$.
![](https://authors.xenox.dev/content/images/2022/01/200--Tailwindcss-Component.gif)