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