1、单行省略号是可以直接用css实现的
p{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
2、多行省略号,用-webkit-line-clamp:2,有兼容问题
p{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
3、用jquery实现多行省略号(讲内容值放置data-world属性内,不直接放在标签内,也可以使用将内容放在title内)
var wordLimit = function(e,num){ var _wor; e.each(function(i,el){ var wor = $(el).data("word"); var maxwidth=num; if(wor.length>maxwidth){ wor = wor.substring(0,maxwidth)+'...'; } $(el).html(_wor); }) }
然后调用
wordLimit($(".text_con"),45);