html - 如何实现长多行字符串的最后几个可见符号的淡入淡出？

Question

存在 css 属性text-overflow: ellipsis。它剪切了太长的文本并附加了省略号。

但我需要淡化最后一个可见符号而不是附加省略号。

有没有简单的方法来实现这个？

我的实现看起来很复杂，我正在寻找更简单的实现：

<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/

为了避免在需要渐变的地方添加渐变框，可以这样做：

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

并将类添加fade-elipsis到要覆盖的任何文本框中。这可能有点整洁。