html - 像 Google play 一样通过降级隐藏文本

Question

我正在尝试获得相同的效果链接 https://play.google.com/store在元素的标题内执行。

如果您查看任何大于 div 宽度的标题，最后您会看到它是如何变成透明的，直到它与白色背景混淆。

我想知道如何才能实现这种效果？

我可以使用 CSS 吗？

提前致谢。

Answer 1

就像@showdev 提到的那样，它只是标签末端的一个 span 元素。 (从站点复制的 CSS，稍作修改。

div {
  width: 200px;
  position: relative; 
  display: block;
}

a {
  display: block;
  font-size: 16px;
  line-height: 18px;
  max-height: 36px;
  min-height: 18px;
  overflow: hidden;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}

span {
  background-image: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));
  background-image: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
  background-image: -moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
  background-image: -ms-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
  background-image: -o-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
  background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1));
  bottom: 0;
  height: 25px;
  max-height: 100%;
  position: absolute;
  right: 0;
  width: 100px;
}

fiddle :http://jsfiddle.net/mqLy2uuy/1/