文字顯示兩行，多餘的省略號（相容搜狐）
我平時除錯程式碼用的谷歌，之前也沒有注意到這個問題，但是最近老闆用搜狐看我寫的網站，發現了在搜狐上文字超過兩行顯示省略號這個樣式不起作用，於是找到了這個解決方案。
1、不需要相容
p{
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 物件作為伸縮盒子模型顯示 **/
-webkit-box-orient: vertical; /** 設定或檢索伸縮盒物件的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 顯示的行數 **/
overflow: hidden; /** 隱藏超出的內容 **/
}
或者
p{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
這兩種其實都一樣
2、相容搜狐（注意：一定要設定高度是行高的兩倍）
p{
line-height: 21px;
height:42px;
position: relative;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 物件作為伸縮盒子模型顯示 **/
-webkit-box-orient: vertical; /** 設定或檢索伸縮盒物件的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 顯示的行數 **/
overflow: hidden; /** 隱藏超出的內容 **/
}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, rgba(199, 198, 204, 0));
background: -o-linear-gradient(right, transparent,rgba(199, 198, 204, 0));
background: -moz-linear-gradient(right, transparent,rgba(199, 198, 204, 0));
background: linear-gradient(to right, transparent,rgba(199, 198, 204, 0));
}