Fading out text on overflow with css if the text is bigger than allowed

Question

I am trying to create a text fade-out effect when the amount of text is bigger than the row can handle. I am achieving this with the mixture of max-height,

Answer 1

Your code is correct just the liner gradient percent must be set

background: -webkit-linear-gradient(top,#000 70%, #fff);

Try the fiddle link

http://jsfiddle.net/ShinyMetilda/kb4fL/1/

You could alse specfiy it in pixel like this

 background: -webkit-linear-gradient(top,#000 140px, #fff);

Both works the same