Line-Clamping — Multiline truncation using CSS.

Its good to know a lot of javascript hacks which we used purely for presentation is slowly becoming a css thing. Simple things like truncating a multiline content and showing ellipsis used to be hard using pure CSS. This was hard because text-oveflow: ellipsis had its own set of constraints. Enter line-clamp to the rescue. Below CSS snippet adds ellipsis if the text overflows more than 3 lines.

.text-content {   
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

If you really want to appreciate this piece of life saver, read this stackoverflow thread because history is important! If you are pumped up after reading this, high five!!! But make sure you checkout the browser support for line-clamp before using it.