Skip to content

Instantly share code, notes, and snippets.

@nobleach nobleach/fading text
Created Dec 18, 2014

Embed
What would you like to do?
Fading Text instead of ellipses
.post.grid .description {
margin-top: 15px;
font-weight: 400;
font-size: 14px;
line-height: 19px;
overflow: hidden;
position: relative;
max-height: 57px;
}
.post.grid .description:after {
content: "\20";
position: absolute;
width: 9.5em;
height: 19px;
top: 57px;
right: 0;
margin-top: -19px;
padding-right: 5px;
text-align: right;
background: -webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(#fff),color-stop(33%,rgba(255,255,255,0)));
background: -moz-linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0) 33%,#fff);
background: -o-linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0) 33%,#fff);
background: -ms-linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0) 33%,#fff);
background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0) 33%,#fff);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.