Line Truncate with ellipses at the end.

index.css

/* Simple css way to truncate line with ellipses at the end. Doesn't work with IE & Firefox*/
:root {
    --lines-to-show: 3;
    --line-height: 18px;
    --font-size: 16px;
}
.element-to-truncate {
    display: block;
    display: -webkit-box;
    max-width: 100%;
    max-height: calc(var(--line-height) * var(--lines-to-show)); /* line height * lines to show;  */
    font-size: var(--font-size);
    line-height: var(--line-height);
    -webkit-line-clamp: var(--lines-to-show);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

index.scss

/* A mixin in SCSS. Doesn't work with IE & Firefox */ 
@mixin lineTruncate($font-size, $line-height, $lines-to-show) {
    display: block;
    display: -webkit-box;
    max-width: 100%;
    max-height: $line-height * $lines-to-show; 
    font-size: $font-size;
    line-height: $line-height;
    -webkit-line-clamp: $lines-to-show;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }