Truncate long text

I'm pretty sure that it's one of well-known CSS snippets to truncate long text:
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
However, it truncates the origin text to a single line. If you want to truncate to a given number of lines, then the -webkit-line-clamp property comes in handy.
The CSS declaration below limits the number of lines to 3:
.truncate {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
Note that the -webkit-line-clamp property only works when we have display: -webkit-box and -webkit-box-orient: vertical declarations.

Demo

Truncate long text