CSS省略号text-overflow[单多行省略号实现总结]

实际项目中很多地方需要CSS实现省略号的效果，一般来说PC只需要考虑单行，移动需要考虑多行省略号，今天俺跟大家总结分享一下我的心得。

单行省略号

单行省略号，不需要考虑兼容性，PC和移动都可以使用。

实现如下：

/*
* 2019/08/26
* 前端教程：www.pipipi.net
*/

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

注意，上面的三个属性white-space、overflow、text-overflow都是必须的，不可以缺少任意一个属性。

多行省略号

多行省略由于不兼容火狐，因此在移动端开发中比较常用，PC不使用。

俺封装了一个多行省略的函数，Less源码如下：

/*
* 2019/08/26
* 前端教程：www.pipipi.net
*/
.text-overflow-ellipsis(@line) when(@line>1) {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @line;
    word-break: break-all;
}

使用方式如下：

.text-overflow-ellipsis(2);

为了兼容单行省略，我们还需要添加一个额外的函数，所以上面封装的函数，最后的写法如下：

/*
* 2019/08/26
* 前端教程：www.pipipi.net
*/
.text-overflow-ellipsis(@line) when(@line=1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-overflow-ellipsis(@line) when(@line>1) {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @line;
    word-break: break-all;
}

单行多行的调用方式如下：

/***
单行
.text-overflow-ellipsis(1);
多行
 .text-overflow-ellipsis(2);
****/

希望可以帮助到有用的朋友们~