多行文本省略

1.单行文本省略

css代码：

p{
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;    
}

2.多行文本省略，效果：

css代码：

.box{
    width: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

-webkit-line-clamp是webkit的私有属性，不是css规范。

-webkit-line-clamp是用来限制一个块元素显示的文本的行数。为了实现效果，需要组合其他的webkit属性：

display: -webkit-box; 必须添加的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient： vertical；必须添加的属性，设置伸缩盒子模型的子元素排列方式。

兼容性：

这个属性目前仅支持webkit浏览器，比较适webkit浏览器或移动端。测试在firefox下不会生效

所以针对火狐浏览器的CSS Hack

@media screen and (min--moz-device-pixel-ratio:0){
    .box{
        position: relative;
        height: 100px;
        line-height: 20px;
        overflow: hidden;
    }
    .box::after{
         content: '...';
         font-weight: bold;
         position: absolute;
         bottom: 0;
         right: 0;
         padding: 0 20px 1px 45px;       
    }
}

这里注意，上面-webkit-line-clamp：5,设置了5行。所以这里height需要是line-height的5倍，这样才能防止文本溢出