CSS实现单行、多行文本溢出显示...的总结

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Candy_yl/article/details/79461159

css实现单行文本溢出显示…

效果图如下：

实现方法：

    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    还需要加宽度width属来兼容部分浏览。

css实现多行文本溢出显示…

效果图如下：

实现方法：

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

css实现多行文本溢出显示…（超出过度渐变消失）

效果图如下：

实现方法：

div {
    position: relative;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
}

div:after {
    content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
    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%);
}