Page 1 of 1

CSS to truncate long items

Posted: 27 Jul 2016, 11:25
by richardg
I wanted a way to easily truncate long items in the list - the following CSS will do this:

div.cdmContentInner {position: relative; max-height: 200px; overflow-y: hidden }
div.cdmContentInner:after {display: block; position: absolute; left: 0; right: 0; top: 170px; height: 30px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 80%, rgba(80, 200, 255, 0.9)); content: "";}

Basically it limits the content panel to 200px, and puts a pale blue gradient line at the bottom to indicate this.

You can change the height by changing the 200px part and the 170px part to match.