Easy Truncate multi-line ellipsis with pure CSS (Latest Fix)

For making a responsive website most of the time everyone faced the challenge of handling the text. So, here I explore some solutions for controlling multi-line text wrap with an ellipsis.

Let’s dive in! 🌊

So you have some text in the fixed-width box, the amount of text is variable so the height of the blocks is uneven.
While in CSS, you can truncate the text to one line using:

text-overflow: ellipsis;

but what about if you want to truncate multiple lines of text? If you want to see that magic then please continue reading ;)

Below is the code for it.

I can read you mind. So right now you are thinking about what is -webkit-line-clamp ? Right? hold on I’ll explain whole thing so don’t worry.

With line-clamp, you can contain a block of text into certain number of lines, so the text never goes out of those line. It is LAKXAM REKHA for text ;)

in above code We define -webkit-line-clamp:2; So, we restricting the text into maximum of 2 lines. When the text starts overflowing out of 2 lines, it gets truncated.

This has to be used in conjunction with display: -webkit-box; for it to work.

still its not working after applying above property. so, dont worry my child I have one jugaad for you. all you have to add is below things in css.

so allyou need to add is /*autoprefixer: off */ and /*autoprefixer: off */ in comment and in between you can write -webkit-box-orient: vertical css property.

You can see the output here:

Hope you enjoyed reading this, do share your thoughts in the comments! 🖤