做專案的時候往往會遇到這麼一種需求：文字溢位需要隱藏。

　　我遇到過兩種情況：

　　　　1.單行文字溢位(如下圖)

　　　　2.多行文字溢位(如下圖)

　　　　以上情況呢，就是你給文字畫好了框框，可人家呆不下啊，那咋辦，咱還是用省略號表示吧

　　　　先看第一種，很好操作，在需要溢位隱藏的程式碼塊里加上下面的css程式碼就妥了：

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

　　用完就是下面的樣子啦

　　再看第二種，先祭出需要加在css上面的程式碼：

{
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;      
}

　　用完之後是這個樣子噠：

　　　其中-webkit-line-clamp可以設定在第幾行新增省略號

　　　　比如我上面的是在第三行，那就寫-webkit-line-clamp: 3;

　　　　如果寫成2的話會是下面這個樣子：

　　　　是的，你沒看錯，就是省略號在第二行，但是第三行依然會顯示出來

　　　　這個時候我們算下高度就好啦，反正在寫頁面的時候都有尺寸的，算算就好了

　　　　但是有一點需要注意，使用上面的兩個方法時，文字容器需要有個寬度，不然可能會出問題的呦。