实现多行省略号

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