会飞的鱼

博客首页 » 网站其他 » CSS实现文本溢出部分省略并显示省略号

CSS实现文本溢出部分省略并显示省略号

实现单行文本溢出省略并显示省略号很简单,只需添加

overflow: hidden;  /*隐藏溢出文字*/
text-overflow:ellipsis;  /*显示省略号*/
white-space: nowrap;  /*强制不换行*/

效果图:

部分浏览器还需要加宽度 width 属性

但是多行文本溢出省略并显示省略号怎么实现呢?

实现方法:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

以上方法使用了WebKit的CSS扩展属性,所以只适用于WebKit浏览器和移动端

分享到:
打赏

评论

游客

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册