Skip to content

Instantly share code, notes, and snippets.

@mareksuscak
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.
Cross-browser multi-line clamping in 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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment