多行文本溢出如何顯示省略號

　　做項目的時候往往會遇到這么一種需求：文本溢出需要隱藏。

　　我遇到過兩種情況：

　　　　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的話會是下面這個樣子：

　　　　

 

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

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

 

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