文本溢出展示省略号的需求经常都会用到,而对于新式的浏览器,这完全不是问题,因为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 === ' ' ? '&amp;nbsp;' : s);
        totalWidth += temp.clientWidth ;
        if(totalWidth + elliWidth > limitWidth){
            str = str.substr(0, i);
            break;
        }
    }
    element.innerHTML = str + ellipsisText;
    temp.parentNode.removeChild(temp);
}

处理字符的时候需要注意的两个个地方就是:

  1. 在页面中连续的空格是会被当成一个空格处理的,因此要把连续的空格合并成一个;
  2. 直接给innerHTML赋值空格' ',其是不会占宽度的,因此要转换成html的空格表示。

通过不断添加新字符并监测添加后的宽度,就可以做到自适应不同的字体和字体大小了。具体例子点击这里查看,这个demo对text-overflow的支持进行了检测,如果支持ellipsis,就直接使用css的,毕竟js计算能省一点是一点。检测css属性及其支持情况可以查看这篇文章

Comments
Write a Comment

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟