Truncate text after a few lines

Clamp a description to three lines with an ellipsis, in CSS only.

SNP 048 #31B Filed css

css
.excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Yes, it's a -webkit- prefixed property, and yes, every browser supports it. The standard name line-clamp is coming, but the prefixed version is what works today.

For a single line the old trio still does the job:

css
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}