How to implement fade of a few last visible symbols of long multi-line string?

Question

There is exists css property text-overflow: ellipsis. It's cut too long text and append ellipsis.

But I need to fade last visible symbols instead of appending ellipsis.

Is there easy way to implement this?

My implementation looks very complex and i'm looking for simpler implementation:

<div class='container'>
    <div class='fade_box'>
    </div>     
    <div class='behind'>
        <div class='right_box'>
        </div>        
        In literary theory, a text is any object that can be "read"
    </div>
</div>    

div.container {
    width:100px;
    line-height:16px;
    height:48px; /* 3*line-height */
    overflow:hidden;
    position:relative;
}
.behind {
    width:200%;
}

.right_box{
    width:50%;
    height: 32px; /* 2*line-height */
    float:right;
}
.fade_box{
    position:absolute;
    width:64px;
    height:16px; /* 1*line-height */
    bottom:0;
    right:0;
    background: -moz-linear-gradient(left center, rgba(255, 255, 255, 0), #FFFFFF);
}

http://jsfiddle.net/wrEef/6/

Answer 1

http://jsfiddle.net/DomDay/cYc83/4/

To avoid adding the gradient box wherever you need the fade, perhaps do this:

.fade-elipsis:after {
    content: ".";
    color: transparent;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    background: -moz-linear-gradient(left center, rgba(255, 255, 255, 0), #FFFFFF);
}

and add class fade-elipsis to any text box you want to overlay. That's a bit tidier maybe.