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!
Top comments (0)