CSS超出盒子显示省略号的兼容性问题

在页面布局中，经常会用到超出显示省略号的情况，但是，此处兼容性问题需要特别注意。因为样式失效会导致页面发生混乱。

超出一行显示省略号（单行）

单行的方法，此方法基本不存在兼容性问题

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

超出多行显示省略号（多行）

多行的方法，此方法存在兼容性问题

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

  上面的-webkit-box-orient和-webkit-line-clamp是一个不规范的属性。它没有出现在CSS规范章程草案中。但在webkit内核的浏览器中可以使用（如谷歌浏览器，大部分移动浏览器也支持）。但是像火狐、IE等浏览器就不支持，样式会失效。故需要做不同浏览器间的兼容性问题。

利用JS进行兼容性处理。

  function wordlimit(cname,wordlength){  //参数分别为：类名，要显示的字符串长度
     var cname=document.getElementsByClassName(cname); //需要加省略符号的元素对象
     for(var i=0;iwordlength){
             cname[i].innerHTML=nowhtml.substr(0,wordlength)+'...';  //截取元素的文本的长度并加上省略号
         }
   }

}

wordlimit("sldiv",15);  //调用方法