How to truncate multi-line string with Pure CSS

#css #beginners

It is easy to truncate a single-line text.

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

Multi-line Tuncation

However, what if you want to truncate after some lines? The CSS -webkit-line-clamp property comes in handy. It helps to limit the block of text into specified number of lines ( 1 or more, as desired). Then ellipsis is added automatically at the end after the truncated point.

   display: -webkit-box;
   -webkit-box-orient: vertical;

   /* to specify the number of lines you want the text to run through... */
   -webkit-line-clamp: 3;
   /* hide the overflowing text, i.e, texts that did not fit in to the box */
   overflow: hidden;

This is a practical example in the codepen below.

I hope that is clear enough!