CSS文本超出指定行数省略显示

单行：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

2行：

font-size: 17px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 20px;
height: 50px;

其中， -webkit-line-clamp: 2; line-clamp: 2; 这两个样式设置的是显示行数， height: 50px; 则是限制显示高度，为了完整的显示指定行数的内容，最好与line-height成一定的线性相关关系，如：

1行 line-height = 30px ;     (20x1.5)
2行 line-height = 30 + 20 = 50px ;    (20x2.5)
3行 line-height = 30 + 20 x 2 = 70px ;    (20x3.5)
4行 line-height = 30 + 20 x 3 = 90px ;    (20x4.5)
......

虽然可以根据font-size、line-height的值来计算最佳高度，但是不同浏览器，不同系统显示的样式都可能会有不同的地方，最好还是多多验证。

封装样式：

一般来说，H5项目中文本省略显示用的都是比较多的，所以可以封装公共样式来用：

/*文本省略——单行*/
.ellipsis{    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*文本省略——多行*/
.ellipsis_mul{    
    overflow: hidden;
    text-overflow: ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}