CSS Text Fading

Sometimes there is a need to display only a portion of the text during site layout. To make it clear to the user that the continuation follows, for example, you can put a three-dot or “read more” link. But there is a very beautiful way to make the text fade out.
To make it clear what is at stake here I will give an example .
Of all the material that I was able to find in a day, the simple and intuitive method described here was the most suitable for me. But it has a significant disadvantage: the shadow is difficult to position and the side edges have to be separated using indents.
For those who are looking for a simple way to darken the text I give my simple example.

So, we need only one block in which there will be text that needs to be darkened:

<div id="textbox"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div> 

And just two CSS classes:

 #textbox{ max-height:100px; overflow:hidden; margin-top:-20px; } #textbox:before{ content:""; display:block; height:20px; position:relative; top:80px; background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%) } 

Now the bottom line:
Using the pseudo-class before, we create a small block with a gradient fill. By default, it is located at the top of the block with text. Using position: relative, move this block down so that it closes one (or several) last lines of text. Everything.
')
Of the benefits can be identified:
- ease of implementation (use only css)
- highlighted text

Of the minuses:
- Does not work in IE up to version 9 inclusive (who would doubt)
- Suitable for fixed height units