一、單行
實現單行文本的溢出顯示省略號使用text-overflow:ellipsis屬性，但需要配合使用overflow: hidden; white-space: nowrap這兩個屬性使用才能達到效果。
注意：
- 這里如果用了flex布局的話，text-overflow:ellipsis將會失效；
- 還有一個問題就是，關於 display:inline 和 display:hidden 一起使用 display:hideen 會失效的問題，因為display:inline,會讓元素的寬度/高度失效,標簽中有多少內容,標簽就是多寬.所以當要將元素變為行內元素又要隱藏超出部分的內容時，可以用 display:inline-block 代替 display:inline；
- 再一個就是，display:inline-block 加上 overflow:hidden 會導致元素塌陷，解決辦法有兩種，1.浮動，然后清除浮動；2.給加了display屬性的元素加vertical-align:bottom（個人推薦使用），或者vertical-align:top
如下：
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
效果：
二、多行
不考慮兼容性，適用於Webkit瀏覽器內核
css代碼：
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-clamp:3 //截取第三行
overflow:hidden;
效果：
