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.)
2行 line-height = + = 50px ; (20x2.)
3行 line-height = + x = 70px ; (20x3.)
4行 line-height = + x = 90px ; (20x4.)
......

虽然可以根据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:;
}