实现多行省略号

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

 

转载于:https://www.cnblogs.com/congfeicong/p/7593593.html