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

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, overflow and linear-gradient. Something like this.

max-height:200px;
overflow:hidden;
text-overflow: ellipsis;
background: -webkit-linear-gradient(#000, #fff);

The full fiddle is available. I am trying to achieve effect similar to this one

and I am kind of close. The problem is that in my case text start to fade-out from the very beginning and I want it to start fading out only if it is really close to maximum size. Lets say start fading out if it is already 150px. Also I am using only -webkit prefix and I assume that there may be other prefixes that I can add for other rendering engines.

Is there a way to do this in pure CSS?

Solution 1:

Looks like your requirement is just to fade out the text beginning at a certain height (about 150px), the text (if any) presenting at that height is considered as overflow. So you can try using some kind of transparent linear gradient layer placed on top of the text area, we can achieve this in a neat way 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);
}

Fiddle

Solution 2:

I used this method derived from reddit pages & it works fine

.fade {
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  }

<div>
    <div class="fade">
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    </div>
</div>

Solution 3:

I’d suggest something like this:

Apply the gradient to an absolutely positioned pseudo-element (:after), that get’s positioned at say 160px from top with 40px height – that way, it’ll not be shown at all in shorter boxes (because of their max-height in combination with overflow:hidden). And the gradient itself 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);
}

http://jsfiddle.net/b9vtW/2/

Solution 4:

I think your are looking for something like this, right?

http://jsfiddle.net/QPFkH/

.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);
}

Solution 5:

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