1

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/

4

1 に答える 1

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します。そのほうが少しきれいかも。

于 2013-07-10T07:59:23.620 に答える