TAT.iAzrael 完美实现溢出文本省略
In 未分类 on 2011年10月25日 by view: 8,503
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

发表评论