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

最新推荐文章于 2020-02-22 12:50:42 发布

anchaqian9321

最新推荐文章于 2020-02-22 12:50:42 发布

阅读量270

点赞数

原文链接：http://www.cnblogs.com/hyx626/p/10283280.html

版权

注明：内容来处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);                                   //调用方法

转载于:https://www.cnblogs.com/hyx626/p/10283280.html