css3渐变透明文字遮盖解决文字只显示一部分的问题

当在网站有大段文字显示的时候, 还有语言切换, 文章默认只显示一半, 点击加载更多的时候才会显示完整内容, 这时候就很容易出现文字显示不完整的情况. 这时候的解决方案不是慢慢调试找到一个高度能完整显示中英文文字 , 而是加入一个半透明遮盖层在文章最下方. 显得更加合理且体验更好.

---

代码如下:

.about-gongsi-info{height:400px;overflow: hidden; position: relative;}
.about-gongsi-info::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0ff, endColorstr=#fff, GradientType=0);
    bottom: 0;
    left: 0;
}

---

显示效果:

---