完美实现溢出文本省略

文本溢出展示省略号的需求经常都会用到，而对于新式的浏览器，这完全不是问题，因为css3里面已经有实现text-overflow：ellipsis，但是最新w3c文档中却移除了这个属性，即使这样，也有不少浏览器实现了这个特性。其浏览器支持情况如下：

IE Firefox Opera Safari Chrome
6+ - 11.0+ 3.0+ 1.0+
可以看到，只有firefox和opera11一下的版本不支持这个浏览器，以此也可以放心大胆的用了。但是遇到要求高的产品经理时（╮(╯_╰)╭），就不得不考虑firefox等不支持的浏览器了，唯有使用js进行字符截断。

比较简单的截断方式就是按字符个数截断，以一个中文宽度等于两个英文宽度为前提，根据给定字符个数进行截取。但是字符在页面显示的时候，其宽度并不是一定的，会根据不同的字体和字体大小的不同而不同，更何况字母i和A的宽度是不一样的，存在bug且不够精确。


这里使用一种方法，通过给需要截取字符的节点附加一个兄弟节点（使用同样的class和style），通过计算各个字符在这个兄弟节点里面所占的宽度来限制字符个数。

代码如下：

双击选中源代码
var ellipsis = function(element){
    var limitWidth = element.clientWidth;
    var ellipsisText = '…';
    var temp = element.cloneNode(true);
    temp.id = 'checkTextLengthNode';
    temp.className = 'check-text-length-node';
    element.parentNode.appendChild(temp);
    var realWidth = temp.clientWidth;
    if(realWidth <= limitWidth){
        return;
    }
    temp.innerHTML = ellipsisText;
    var elliWidth = temp.clientWidth;
 
    var str = element.innerHTML;
    str = str.replace(/\s+/g, ' ');
    var s, totalWidth = 0;
    for(var i = 0, len = str.length; i < len; i++){
        s = str.charAt(i);
        temp.innerHTML = (s === ' ' ? '&nbsp;' : 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/