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

we can  achieve this in the way by using the pseudo-element :before like this:

.row:before
{
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background:linear-gradient(transparent 150px, white);
}

Because of the gradient to an absolutely positioned pseudo-element b[/b], that which is to be positioned at the 160px from top with the 40px height – that way, it will not be with the shorter boxes . And the gradient itself it is from totally transparent (rgba(0,0,0,0)) to solid black.

.row
{
  position:relative;
  /* … */
}
.row:after
{
  content:"";
  position:absolute;
  top:160px;
  left:0;
  height:40px;
  width:100%;
  background: linear-gradient(rgba(0,0,0,0), #000);
}

  Use this code for your result:

.text
{
  position:relative;
  width:200px;
  max-height:10em;
  overflow:hidden;
}
.shadow
{
  position:absolute;
  top:8em;
  width:100%;
  height:2em;
  background: -webkit-linear-gradient(transparent, white);
  background: -o-linear-gradient(transparent, white);
  background: -moz-linear-gradient(transparent, white);
  background: linear-gradient(transparent, white);
}