Skip to content

Instantly share code, notes, and snippets.

@mareksuscak

mareksuscak/mixins.scss

Created October 5, 2020 22:07
Show Gist options
  • Save mareksuscak/0d49a908216c9e640ddbcc4d33f8feb4 to your computer and use it in GitHub Desktop.
Save mareksuscak/0d49a908216c9e640ddbcc4d33f8feb4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mareksuscak revised this gist Oct 5, 2020. No changes.
  2. mareksuscak created this gist Oct 5, 2020.
    22 changes: 22 additions & 0 deletions mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    /* 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);
    }
    }