CSS: Creating a text fade out effect when it overflows

17 Jul, 2013 05:07 AM
 css
I often encounter this issue where i have to clip text when it exceeds a div boundary with an option to read full text via a 'more' link as below - 
text clippedIt looks odd when the text gets clipped at half the line as above since the container dimensions are fixed but the text might have varying font-sizes and font-styles. To make this look good i would love to have a fadeout effect as below - 

text fadeout

Here is the html and css snippets that helped me achieve this - 

HTML (Have left out lot of html to keep it simple)
<div class="content">Text goes here</div>
<div class="content-mask"></div>
<div>more...</div>


CSS (only minimal css is shown)
.content {
  overflow: hidden; /* Required */
}

/* Position this appropriately over the above element bottom with slight over-lap (styling for positioning not shown here) */
.content-mask {
   background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
   background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
   background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
   background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
   background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#1ffffff',GradientType=0 );
 
}

Adios!