之前做過一個需求，隱藏多餘的文本內容，顯示省略號，然後我用截取文本長度的方式實現了。中途還考慮過中文字符長度較長還弄了個算法判斷中文字符的長度加1。但是後來又出現一個問題，就是在不同的瀏覽器下元素塊的寬高樣式不一致的問題。拿到這個需求的時候我的思路是根據元素塊高寬和字符大小和行高計算文本的長度。但是在想偷懶查詢網上有沒有現成方法時發現竟然可以用css實現這個需求。
text-overflow: clip|ellipsis|string;
string類型在不同的瀏覽器兼容上有問題。不過clip剪切和ellipsis省略號是可以用的。
隱藏前
單行省略號
text-overflow: ellipsis;
width: 100px;//必須限制寬度
white-space: nowrap;//限制換行
overflow: hidden;//隱藏超出部分
多行省略號
text-overflow: ellipsis;
width: 100px;//必須限制寬度
overflow: hidden;
-webkit-line-clamp: 3;//需要控制的行數
-webkit-box-orient: vertical;//必需
display: -webkit-box;//必需
