Cross-browser multi-line clamping in SCSS

mixins.scss

/* Multiline Clamp Mixin */

// Helper Function for Multiline Clamp Mixin
@function multiline-block-height($lines, $font-size, $line-height) {
  @return $lines * floor($font-size * $line-height);
}

@mixin multiline-clamp($lines: 2, $font-size: 16px, $line-height: 1.4, $fill-space: false) {
  font-size: $font-size;
  display: block;
  display: -webkit-box;
  line-height: $line-height;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: normal;
  max-height: multiline-block-height($lines, $font-size, $line-height);
  @if ($fill-space) {
    min-height: multiline-block-height($lines, $font-size, $line-height);
  }
}