在页面布局中，经常会用到超出显示省略号的情况，但是，此处兼容性问题需要特别注意。因为样式失效会导致页面发生混乱。
超出一行显示省略号（单行）
单行的方法，此方法基本不存在兼容性问题
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;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); //调用方法
