CSS单行、多行文本溢出显示省略号(……)

时间:2021-09-15 16:03:44

这个问题经常遇到

1、单行文本溢出显示省略号(…)

text-overflow:ellipsis-----部分浏览器还需要加宽度width属性

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

2、多行文本溢出显示省略号,WebKit浏览器或移动端的页面

overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;

3、兼容各种浏览器的jQuery插件-jQuery.dotdotdot(https://github.com/FrDH/jQuery.dotdotdot)

这个用起来很简单,js加

$(function(){

$("#div1").dotdotdot({});

})

css里设置宽高,宽控制换行,高控制显示几行。