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.