完美实现溢出文本省略
文本溢出展示省略号的需求经常都会用到，而对于新式的浏览器，这完全不是问题，因为css3里面已经有实现text-overflow：ellipsis，但是最新w3c文档中却移除了这个属性，即使这样，也有不少浏览器实现了这个特性。其浏览器支持情况如下：
IEFirefoxOperaSafariChrome
6+-11.0+3.0+1.0+
可以看到，只有firefox和opera11一下的版本不支持这个浏览器，以此也可以放心大胆的用了。但是遇到要求高的产品经理时（╮(╯_╰)╭），就不得不考虑firefox等不支持的浏览器了，唯有使用js进行字符截断。
比较简单的截断方式就是按字符个数截断，以一个中文宽度等于两个英文宽度为前提，根据给定字符个数进行截取。但是字符在页面显示的时候，其宽度并不是一定的，会根据不同的字体和字体大小的不同而不同，更何况字母i和A的宽度是不一样的，存在bug且不够精确。
这里使用一种方法，通过给需要截取字符的节点附加一个兄弟节点（使用同样的class和style），通过计算各个字符在这个兄弟节点里面所占的宽度来限制字符个数。
代码如下：
双击选中源代码
varellipsis=function(element){
varlimitWidth=element.clientWidth;
varellipsisText='…';
vartemp=element.cloneNode(true);
temp.id='checkTextLengthNode';
temp.className='check-text-length-node';
element.parentNode.appendChild(temp);
varrealWidth=temp.clientWidth;
if(realWidth<=limitWidth){
return;
}
temp.innerHTML=ellipsisText;
varelliWidth=temp.clientWidth;
varstr=element.innerHTML;
str=str.replace(/\s+/g,'');
vars,totalWidth=0;
for(vari=0,len=str.length;i<len;i++){
s=str.charAt(i);
temp.innerHTML=(s===''?' ':s);
totalWidth+=temp.clientWidth;
if(totalWidth+elliWidth>limitWidth){
str=str.substr(0,i);
break;
}
}
element.innerHTML=str+ellipsisText;
temp.parentNode.removeChild(temp);
}
处理字符的时候需要注意的两个个地方就是：
在页面中连续的空格是会被当成一个空格处理的，因此要把连续的空格合并成一个；
直接给innerHTML赋值空格’‘，其是不会占宽度的，因此要转换成html的空格表示。
通过不断添加新字符并监测添加后的宽度，就可以做到自适应不同的字体和字体大小了。具体例子点击这里查看，这个demo对text-overflow的支持进行了检测，如果支持ellipsis，就直接使用css的，毕竟js计算能省一点是一点。检测css属性及其支持情况可以查看这篇文章。
http://www.alloyteam.com/2011/10/js-text-overflow/