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

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

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

现在 css3 出来了， 添加了许多新特性，但由于并未全部浏览器都实现了这些特性，使用起来不太顺畅。因此，就想在使用的时候进行判断，如果有这个属性并且支持这种值，就 css 实现， 否者就用 js 实现。

比较明显的例子就是 text-overflow 这个属性，text-flow：clip 是大部分浏览器都支持的，而 text-flow：ellipsis 则在 firefox 和 10.6 版本以下 opera 上工作不了，让人相当头疼。

废话少说，判断的代码如下：

这个判断的原理是：创建一个节点，判断其的 style 属性是否含有 textOverflow 属性，有则进一步判断是否支持 ellipsis 这个值。

判断是否支持 ellipsis 值依靠的是浏览器对于非法 style 值的处理，当遇到不支持的属性值时，浏览器会直接把这个值抛弃。因此这里就可以先给 textOverflow 赋值 “ellipsis”，如果不支持，则其值肯定为空或者其它不等于 “ellipsis” 的值。因此只要判断赋值后的 textOverflow 是否等于 “ellipsis” 即可。

Hello，everyone~ Tencent Alloy Team博客正式开通咯（鼓掌，撒花，转圈），博客的第一篇文章，好紧张！！~~~·⊙﹏⊙b汗~~欢迎大家多多拍砖~~：）

首先，我们为什么要建设这个博客呢

• 第一，当然是为了我们的团队让更多的人知道我们了：）
• 第二，是通过写博客和分享提高我们团队在项目建设上的整体实力：）
• 第三，通过写博客与同行者进行交流互动，认识更多业界的人：）
• 第四，通过分享我们的经历，分享我们的技术，帮助到更多需要的人，为推动业界的发展做出一点贡献：）
• 第五，是凝聚团队向心力，提高团队使命感，发展团队文化。在这里可以自由施展，这里可以学习进步！这里就是你的家~~~