博客

转载声明: 请注明本文引用自http://www.cnblogs.com/guolizhi/

css中

-webkit-line-clamp

这个属性表示超过指定行的文本隐藏并且会在结尾加上

...

号，用起来十分快捷。但是该属性只支持

Chrome

，在

IE

,

FireFox

下都无效。

解决方案：可以用一种比较这种的方式来处理

p {
    height: 3.6em;
    font-size: 16px;
    color: #999;
    line-height: 1.8;
    overflow: hidden;
    position: relative;

    &:after {
        content: '';
        text-align: right;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10%;
        height: 1.8em;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
    }
}

效果如图:

上面的代码给p元素上面添加了一个伪类。并且让这个伪类采用绝对定位，定位至文本结尾处。

超过的部分可以使用

overflow:hidden

隐藏。并且结果部分用一个渐变效果遮盖

以上就是这种比较这种的解决方式