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

If you don't need to rely on percentage values, use box-shadow instead of background-image. It makes it possible to let the user interact with the elements behind your fading-thingy, without the need of pointer-events: none (http://caniuse.com/#feat=pointer-events):

box-shadow: 0 0 2em 1em #f00;
height: 0;

But be warned, box-shadow can slow down scrolling:

• http://nerds.airbnb.com/box-shadows-are-expensive-to-paint