CSS3 text-overflow属性

在列表页面显示内容时，我们经常需要显示部分文本内容即可，这样的话，就要使用到文本溢出的属性text-overflow。

text-overflow官方有以下几种取值：

1、visible：指虽然文本内容超过可以显示的位置的长度，仍为可见。

2、clip：指将显示超过文本框区域的内容直接截断，但是这种截断只是视觉上的截断，可能会存在仍保留了半个字符的情况。常常这种截断是不理想的，有时候不大熟悉这个属性的童鞋就容易被坑了。详见文末的示例。

3、ellipsis：文字截断后，使用...显示在末尾

4、'.'： 目前大部分浏览器尚未支持，以"."号作为截断符号

5、''：目前大部分浏览器尚未支持，以""作为截断符号，这种通常是我们理想的截断方式，但是浏览器支持性不普遍。

6、两个属性值的组合，这种目前也很多浏览器尚未兼容。

具体每个属性的用法说明，请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-overflow 或者其它官方网站

浏览器兼容性：

clip示例：由下图可见，clip只是视觉上的截断，因此需要修改white-space的属性，让内容在文本区域内显示为换行，然后因此Y轴内容即可。

即将white-space属性改为initial。不过通常默认文本是会换行的。