CSS文本超出部分渐变隐藏怎么实现

Question

如图，在谷歌浏览器的收藏夹上看到的，第一个和第三个文本最后都有渐变隐藏的效果，请教如何实现。非常感谢

Answer 1

这个简单，只用css可实现：

css3过渡：transition: 过渡的属性 过渡的时间(秒);    一般和:hover搭配使用。

详细可查w3c

Answer 2

刚刚那个不完整 p::after { height: 16px; content: ""; // '...' position:absolute; bottom:9px; right:0; padding-left:30px; background:-webkit-linear-gradient(left,transparent,#fff 55%); background:-o-linear-gradient(right,transparent,#fff 55%); background:-moz-linear-gradient(right,transparent,#fff 55%); background:linear-gradient(to right,transparent,#fff 55%); }

Answer 3

height: 16px; content: ""; // '...' position:absolute; bottom:9px; right:0; padding-left:30px; background:-webkit-linear-gradient(left,transparent,#fff 55%); background:-o-linear-gradient(right,transparent,#fff 55%); background:-moz-linear-gradient(right,transparent,#fff 55%); background:linear-gradient(to right,transparent,#fff 55%);

Answer 4

box-shadow