multiline ellipsis module

_ellipsis.scss

// @8trust

// map font-sizes
// build as needed
$font-sizes: (
    xsmall: 12px,
    small: 14px
);

// function to get sizes easier
// use font-size: ET-fs(small)
@function ET-fs($key) {
    @if map-has-key($font-sizes, $key) {
        @return map-get($font-sizes, $key);
    } @else {
        @warn "Unknown `#{$key}` in $font-sizes.";
        @return null;
    }
}

html {
    font-size: 62.5%; //default font is now 10px, which makes math easier. 1rem = 10px
}

p {
    margin: 0;
}

// @use .ellipsis- + $lines-to-show
// @params change $lines-to-show if you need more than 5 lines

$font-size: ET-fs(small);
$line-height: $font-size / 10px;
$class-slug: ellipsis;
$lines-to-show: 5;
$width: 30%;

[class*=#{$class-slug}] {
    display: block; /* Fallback for non-webkit */
    display: -webkit-box;
    max-width: $width;
    margin: 10px auto 0;
    font-size: $font-size;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@for $lines from 1 through $lines-to-show {
    .#{$class-slug}-#{$lines} {
        line-height: $line-height;
        height: $font-size * $line-height * $lines; /* Fallback for non-webkit */
        -webkit-line-clamp: $lines;
    }
}