Multi-Line Truncation with Tailwind CSS

Hi there, in this article I’ll show you guys how to truncate a text using an official Tailwind CSS plugin named line-clamp. Let jump into it.

Let assume we have 3 cards which look like this.

As you can see, their text length is not the same which is generally not what we want. So, in order to solve this, we could use the default truncate utility in Tailwind CSS. Let have a look how our card gonna looks like if we use this default property.

Well, our text now just has one line, and all the overflow text was hidden. What happened if we want our text show the first 3 lines and then truncate the other lines. Bad news that we cannot do it with the default truncate in Tailwind CSS, but recently Tailwind has introduced to us an official plugin named line-clamp which can help us to achieve what we want above. Now let has a look of how to use it.

First, we need to install that plugin via npm, note that your computer must install nodejs to use it.

npm install -D @tailwindcss/line-clamp

Then add the plugin to your tailwind.config.js file.

And that it, now we can replace the truncate class with line-clamp-{n}. In our case, we want the text to show its first three line so it must be line-clamp-3. See the result below.

Yup we have done it. In case you guys want to show 5 lines of text then hide it just type line-clamp-5.

😎 Conclusion

There are many cool plugins left in Tailwind CSS, you can refer to here to have a look at it.

If this post was useful to you, please leave me a like 👋 and follow me, that help me a lot 😘.

Thank you so much for reading this, if you want more interesting topic like this you can visit my portfolio website or my GitHub repository.