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

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

Asked on October 25, 2018 in HTML5.
Add Comment


  • 3 Answer(s)

    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);
    }
    
    Answered on October 25, 2018.
    Add Comment

    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);
    }
    
    Answered on October 25, 2018.
    Add Comment

      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);
    }
    
    Answered on October 25, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.