TAT.iAzrael 完美实现溢出文本省略
In 未分类 on 2011年10月25日 by view: 5,982
9

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

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

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

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

代码如下:

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

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

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

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2011/10/js-text-overflow/

  1. 夏雨轩 2016 年 3 月 7 日

    看的人少,回一下

  2. 徐紫萱 2016 年 1 月 23 日

    我是来打酱油的

  3. 日高司 2016 年 1 月 16 日

    [拳头]要看空姐制服照私藏美图,就来→ http://sebi.club

  4. 千飞蕾 2016 年 1 月 11 日

    [挑眉]

  5. murphy 2016 年 1 月 7 日

    多行文字省略号如何破?-webkit-line-clamp貌似兼容性不是很好

  6. excel学习网 2014 年 6 月 7 日

    具体例子点击这里查看,看到的是宝贝回家。一定alloyteam的TAT.iAzrael 粗心了,希望能补充上例子,否则100分只能得到40分,多可惜呀,我相信例子一定会上,谢谢。

  7. tcdona 2012 年 10 月 26 日

    例子404了呢,非常好的方法,学习

  8. Best Mattress 2011 年 11 月 12 日

    Great! thanks for the share!

  9. TAT.sheran

    sheran 2011 年 10 月 28 日

    good

发表评论