/* Line Clamping */
/* The ellipsis classes reveal a '...' if there is more content that isn't being displayed */
/* The ellipsis-container class adds padding to the container to stop the ellipsis clipping text */
.ellipsis-container {
padding-right: 1rem;
position: relative;
.ellipsis {
display: inline;
&:before, &:after { position: absolute; }
&:before {
content: '\2026';
bottom: 0;
right: 0;
}
&:after {
content: '';
height: 100%;
width: 100%;
}
}
/* Clamping is a mechanism to limit the number of lines that can be displayed in a container */
&.clamped {
line-height: 1.5;
overflow: hidden;
}
/* Clamp to 2 lines, ie line-height x 2: */
&.clamped-2 { max-height: 3rem; }
&.clamped-3 { max-height: 5em; }
}
SCSS Version of Barney Carroll's pen - http://codepen.io/barneycarroll/pen/acJpA
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.