文本溢出展示省略号的需求经常都会用到，而对于新式的浏览器，这完全不是问题，因为 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 属性及其支持情况可以查看这篇文章。