Skip to content

Instantly share code, notes, and snippets.

@kaelig
Last active August 19, 2021 08:27
Show Gist options
  • Star 18 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save kaelig/7528069 to your computer and use it in GitHub Desktop.
Save kaelig/7528069 to your computer and use it in GitHub Desktop.
// Clamps a block of text to a certain number of lines,
// followed by an ellipsis in Webkit and Blink based browsers
// Reference: http://dropshado.ws/post/1015351370/webkit-line-clamp
@mixin text-clamp($lines: 2, $line-height: false) {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
// Fallback for non-Webkit browsers
// (won't show `…` at the end of the block)
@if $line-height {
max-height: $line-height * $lines * 1px;
}
}
@himynameisdave
Copy link

This is perfect, love the fallback 👍

@michaelguild13
Copy link

to keep the ellipsis:
text-overflow: ellipsis;

@RomanVinichenko
Copy link

is there any properties for min 2 lines? (even if the text take space only for one line - the second was invisible)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment