CSS文本超出指定行數省略顯示

單行：

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

2行：

font-size: 17px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 20px;
height: 50px;

其中， -webkit-line-clamp: 2; line-clamp: 2; 這兩個樣式設置的是顯示行數， height: 50px; 則是限制顯示高度，為了完整的顯示指定行數的內容，最好與line-height成一定的線性相關關系，如：

1行 line-height = 30px ;     (20x1.5)
2行 line-height = 30 + 20 = 50px ;    (20x2.5)
3行 line-height = 30 + 20 x 2 = 70px ;    (20x3.5)
4行 line-height = 30 + 20 x 3 = 90px ;    (20x4.5)
......

雖然可以根據font-size、line-height的值來計算最佳高度，但是不同瀏覽器，不同系統顯示的樣式都可能會有不同的地方，最好還是多多驗證。

封裝樣式：

一般來說，H5項目中文本省略顯示用的都是比較多的，所以可以封裝公共樣式來用：

/*文本省略——單行*/
.ellipsis{    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*文本省略——多行*/
.ellipsis_mul{    
    overflow: hidden;
    text-overflow: ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}