CSS顯示指定行數文本、限制文本最大行數

一、CSS顯示指定行數文本

1.單行文本溢出用省略號顯示：

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

2.多行文本溢出用省略號顯示：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

適用范圍：
因使用了WebKit的CSS擴展屬性，該方法適用於WebKit瀏覽器及移動端；

注：

1. -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果，它需要組合其他的WebKit屬性。常見結合屬性：
2. display: -webkit-box; 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。
3. -webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。

      更多方法參考：https://hyq9508.github.io/css/2015/06/24/Mutiline-text-overflow.html

二、限制文本最大行數

      要判斷行數的文本的樣式：

text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical; 
-webkit-line-clamp: 5; 
line-height: 20px;
max-height: 100px;

可獲取到元素height和line-height的值，計算文本的行數