移動端頁面實現多行文本溢出顯示省略號...

手機瀏覽器種類：

UC瀏覽器，QQ瀏覽器，歐朋瀏覽器，百度手機瀏覽器，360安全瀏覽器，谷歌瀏覽器，搜狗手機瀏覽器，獵豹瀏覽器，其餘雜牌瀏覽器

國內的UC和QQ，百度等手機瀏覽器都是根據Webkit修改過來的內核，國內尚無自助研發的內核，就像國內的手機操做系統都是基於Android修改的

 

因爲移動端（絕大多數都是基於WebKit內核的瀏覽器），因此能夠直接使用WebKit的CSS擴展屬性 -webkit-line-clamp （是WebKit私有屬性）；注意：（這個屬性沒有出如今css規範草案中，不過在WebKit內核中能夠正常使用）。

 

CSS代碼以下：

1 overflow : hidden;
2 text-overflow: ellipsis;
3 display: -webkit-box;
4 -webkit-line-clamp: 2;
5 -webkit-box-orient: vertical;

1.  overflow:hidden;  設置了這個屬性，text-overflow屬性纔會生效。

2.  text-overflow: ellipsis;  用來在多行文本的狀況下，用省略號"..."隱藏超出範圍的文本內容。

3.  display: -webkit-box;  必須結合的屬性，將對象做爲彈性伸縮盒子模型顯示。

4.  -webkit-line-clamp: 2;  用來限制在一個塊元素顯示的文本的行數。爲了實現該效果，它須要組合其餘的WebKit屬性。

5.  -webkit-box-orient: vertical;  必須結合的屬性，設置或檢索伸縮盒對象的子元素的排列方式。