CSS 控制字符宽度省略号效果 兼容浏览器

要实现 CSS 控制字符宽度省略号效果，需要使用 CSS 中的 text-overflow 属性。

1.基本用法

text-overflow 属性中的 ellipsis 值可以实现省略号效果，但是必须要同时设置 white-space 和 overflow 属性，才能让省略号生效。其中，white-space 的值必须是 nowrap 或 pre-wrap，overflow 值必须是 hidden 或者 scroll，这样才能使文本过长时溢出部分被隐藏，从而展示省略号。

示例代码如下：

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2.兼容性处理

虽然上面的 text-overflow 属性的用法在现代浏览器中都能很好地支持，但是在 IE6、IE7、IE8 浏览器中是无法支持的。为了让这些老旧的浏览器也能支持字符宽度省略号效果，可以使用 CSS 的 -ms-text-overflow 属性。该属性与 text-overflow 属性的用法相同，在 IE6、IE7、IE8 中才能生效。

示例代码如下：

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 兼容 IE6-8 */
  -ms-text-overflow: ellipsis;
}

除此之外，还可以通过 JS 代码来进行兼容性处理。例如使用 jQuery 的插件 dotdotdot.js，可以实现跨浏览器的字符宽度省略号效果，其原理就是使用 JS 判断容器内文本的高度，如果超出了容器的高度，就添加省略号。

示例代码如下：

$('.ellipsis').dotdotdot({
    ellipsis: '...',   //省略符号的字符串
    truncate: 'word',  //按单词分割，可选 “letter”，按字母分割
    wrap: 'word'       //元素会被单词包裹，可选 “letter” 字母包裹
});

通过以上两个例子的说明，我们可以兼容各大主流浏览器实现 CSS 控制字符宽度省略号效果。