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