多行文字超出字数部分省略(主要解决不兼容;display: -webkit-box;的浏览器)

注明:内容来处https://www.cnblogs.com/ss977/p/5846176.html

1、现webkit内核的浏览器支持display: -webkit-box;属性, 所以网页中显示两行文字,超出部分省略,可以用样式

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

2、为兼容其他浏览器,则需要js解决,以下为封装的方法。

function wordlimit(cname,wordlength){                  //参数分别为:类名,要显示的字符串长度
    var cname=document.getElementsByClassName(cname);  //需要加省略符号的元素对象
    for(var i=0;i<cname.length;i++){           
       var nowhtml=cname[i].innerHTML;                //元素的内容
        var nowlength=cname[i].innerHTML.length;      //元素文本的长度
        if(nowlength>wordlength){
            cname[i].innerHTML=nowhtml.substr(0,wordlength)+'...';      //截取元素的文本的长度并加上省略号
        }
    }
}
wordlimit("sldiv",15);                                   //调用方法
posted @ 2019-01-17 17:08  十年后2028  阅读(513)  评论(0编辑  收藏  举报