在列表頁面顯示內容時，我們經常需要顯示部分文本內容即可，這樣的話，就要使用到文本溢出的屬性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。不過通常默認文本是會換行的。