How to add text ellipsis for multiline by CSS

Ellipsis (…) for single-line text is easy these days. CSS makes that somewhat easy with the text-overflow property.

Ellipsis on single-line text

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

But, If you want to use ellipsis on multiline text then don’t expect to have any fun. CSS has no standard method for doing this.

However, there are various tricky workarounds have been created recently. One of the methods is here:

Ellipsis on multiline text

.text-ellipsis-multi-line{
  text-overflow: ellipsis;
  overflow: hidden;
  // Addition lines for 3 line or multiline ellipsis
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}