文本溢出展示省略号的需求经常都会用到,而对于新式的浏览器,这完全不是问题,因为css3里面已经有实现text-overflow:ellipsis,但是最新w3c文档中却移除了这个属性,即使这样,也有不少浏览器实现了这个特性。其浏览器支持情况如下:
Browser | Version |
---|---|
IE | 6+ |
Firefox | - |
Opera | 11.0+ |
Safari | 3.0+ |
Chrome | 1.0+ |
可以看到,只有firefox和opera11以下的版本不支持这个浏览器,以此也可以放心大胆的用了。但是遇到要求高的产品经理时(╮(╯_╰)╭),就不得不考虑firefox等不支持的浏览器了,唯有使用js进行字符截断。
比较简单的截断方式就是按字符个数截断,以一个中文宽度等于两个英文宽度为前提,根据给定字符个数进行截取。但是字符在页面显示的时候,其宽度并不是一定的,会根据不同的字体和字体大小的不同而不同,更何况字母i和A的宽度是不一样的,存在bug且不够精确。
more
这里使用一种方法,通过给需要截取字符的节点附加一个兄弟节点(使用同样的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属性及其支持情况可以查看这篇文章。