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;
}

小提琴：http://jsfiddle.net/mqLy2uuy/1/

通过降级来隐藏文字，就像谷歌播放一样

1 个答案: