html - 在容器末尾淡出链接

Question

我想知道如果链接太长而无法放入容器，是否有任何方法可以淡出而不是截断链接。这就是我的意思(图片取自 user966582's question ):

最简单的解决方案是在容器中插入一个具有渐变背景的绝对定位元素，但在这种情况下它会覆盖链接，使其在渐变下变得不可点击。

我发现的另一种方法是使用-webkit-mask:

.wide-faded {
    -webkit-mask: -webkit-linear-gradient(right,
        rgba(255,255,255,0),
        rgba(255,255,255,1) 103px,
        rgba(255,255,255,1)
    );
}

结果正是我所需要的(链接是可点击的!)，但它缺少跨浏览器支持。

有没有办法以跨浏览器的方式实现相同的目的？提前致谢。

Answer 1

您可以将渐变应用于伪元素的背景

.fade {
    position:relative;
    display:inline-block;
}
.fade:after {
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:20px;
    height:100%;

    background: -webkit-gradient(linear, 0 0, 100% 0, 
        from(rgba(255, 255, 255, 0)), 
        to(rgba(255, 255, 255, 1)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
}