文字多行省略号

文字多行省略号

.clamp-ellipsis{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

优点 ：

从效果上来看，它的优点有：

1. 响应式截断，根据不同宽度做出调整
2. 文本超出范围才显示省略号，否则不显示省略号
3. 浏览器原生实现，所以省略号位置显示刚好

缺点 ：

但是缺点也是很直接，因为 -webkit-line-clamp 是一个不规范的属性，它没有出现在 CSS 规范草案中。也就是说只有 webkit 内核的浏览器才支持这个属性，像 Firefox, IE 浏览器统统都不支持这个属性，浏览器兼容性不好。

使用场景：多用于移动端页面，因为移动设备浏览器更多是基于 webkit 内核，除了兼容性不好，实现截断的效果不错。

文字单行省略号

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