How to truncate multiple line text using CSS ? (Adding ellipsis at the end of the text)

Let us suppose we want X lines of a text. Anything after that should be gracefully cut off and three dots(…) should get appended. This is called “Line Clamping”.

Imagine we have some HTML like this

And we want to limit it to exactly three lines in a container. Like this:

There are couple of ways to get this done. But we will discuss the simplest way.

Here, -webkit-line-clamp: 3 means we want to cut off the string after three lines.

Yeahhh, its that simple !!

Thank you for reading this article. Do not forget to give it a clap.