ff文字省略號

寫手機端頁面的時候遇到，文字超過兩行，多的文字須要省略。

 

css代碼：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

寫這些就好，因爲手機端頁面無兼容性；用FF的瀏覽器看到效果的時候，有很大的兼容問題。

百度了一下，發現有用after的寫法，無任何兼容問題！服氣~

跨瀏覽器兼容的方案

比較靠譜簡單的作法就是設置相對定位的容器高度，用包含省略號(…)的元素模擬實現；

例如：

1. p {
2. position:relative;
3. line-height:1.4em;
4. /* 3 times the line-height to show 3 lines */
5. height:4.2em;
6. overflow:hidden;
7. }
8. p::after {
9. content:"...";
10. font-weight:bold;
11. position:absolute;
12. bottom:0;
13. right:0;
14. padding:0 20px 1px 45px;
15. background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
16. }

　　學習了