1. 犀牛前端部落首页
  2. 新手错误

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

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);
****/

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

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2540.html

发表评论

登录后才能评论