css - 如何更改修剪字符串上最后几个字符的透明度

Question

这是问题所在：

• 我有一个名称不同长度的项目列表。
• 如果名称更长，我想将名称修剪为 140 像素。
• 作为向用户展示字符串被修剪的一种很好的干净方式，我想降低名称最后几个字符的透明度，或者至少创造这种错觉。
• 我不想使用省略号...效果有几个很好的理由。

我这可能在纯 CSS 中？

Answer 1

当然可以，使用 CSS。您有两种选择，但实际上只有第一种才能在跨浏览器中获得最佳效果。

这个想法是在包含字符串的元素的右侧覆盖一个伪元素。这仅适用于纯色背景色，因为我们将使用该颜色“淡化”到。

HTML

<span>This string ends with an gradient to the background color overlayed</span>

CSS

span {position:relative;}
span.overlay:after {
    content:"\0020";
    display:block; width:50px; 
    position:absolute; right:0px; top:0px; bottom:0px; z-index:2;
    background-image:-webkit-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image:-moz-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image:-ms-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image:-o-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image:linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));
    /* Or use an actual png image fading to white for IE < 10 support */
}

该:after元素适用于所有浏览器，IE8+。IE10+中-ms-gradient唯一的，所以要么弄清楚如何使用旧的 ie 渐变滤镜，要么使用 PNG 图像。

还有另一种较新的 CSS 方法，但 目前仅受 webkit（Chrome 和 Safari）支持， mask-image . 在这里，您可以使用图像或 CSS 渐变来遮盖元素。相同的原则，除了您实际上可以淡化元素（如果您的文本在模式上）。

span{
    -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 0px, rgba(0,0,0,1) 50px);
}

你可以看看这个 jsfiddle：http: //jsfiddle.net/rgthree/b96sv/

Answer 2

是的，您可以这样做，但您必须将每个尾随字符包装在 a 中<SPAN>，并为每个字符设置 CSS 不透明度。