Skip to content

Instantly share code, notes, and snippets.

@nobleach
Created December 18, 2014 14:04
Show Gist options
  • Save nobleach/5aee27ec50860826d122 to your computer and use it in GitHub Desktop.
Save nobleach/5aee27ec50860826d122 to your computer and use it in GitHub Desktop.
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