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

问题是：

• 我有一个项目列表，每个项目的名称都有不同的长度
• 我想修剪名称到140像素，如果他们更长
• 作为一种干净的方式 为了向用户演示字符串已被修剪，我想 降低名称最后几个字符的透明度，或 至少要制造这种错觉
• 我不想使用省略号。。。有几个很好的理由可以证明这一效果

---

我认为这在纯CSS中是可能的？

是的，您可以这样做，但必须将每个尾随字符包装在

中，并为每个字符设置CSS不透明度。

当然可以，使用CSS。您有两个选项，但实际上只有第一个选项可以在跨浏览器时获得最佳结果

其思想是在包含字符串的元素的右侧覆盖一个伪元素。这将只工作，如果它在一个坚实的背景色，因为我们将使用该颜色“淡入”到

HTML

---

您可以查看这个JSFIDLE:

140像素或140个字符？谢谢您的回复，但正如我所说的，我正在寻找一个纯CSS解决方案，因此我不必输入逻辑来找出需要透明的字符。

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

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

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