Line Clamping - Ellipsis Clipping Text

/* 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.