Text Limit By Number of Lines

One of the benefit having MS Edge as a webkit browser, is that we can use webkit prefix more freely.

The common (annoying) UI request is text limit by lines. I often asked my PM for character limit instead, which may not be reliable.

In 2020, we can just use -webkit-line-clamp property. Firefox has supported it since last year as well.

@mixin line-clamp($total){
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

Assuming the container already has width, we can just apply the above styling.