victorpavlov
10/2/2019 - 12:34 PM

SCSS mixin for vertical multi-line text truncate with ellipses

scss-truncate-ellipses-vertical
content_copyfile_download
// e.g: @include truncate(14px, 1.4, 10)

@mixin truncate($font-size: 16px, $line-height: 1.5, $lines-to-show: 3) {
  display: block; // Fallback for non-webkit
  display: -webkit-box;
  max-width: 100%;
  max-height: $font-size*$line-height*$lines-to-show; // Fallback for non-webkit
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}