1. 程式人生 > >移動端頁面實現多行文本溢出顯示省略號...

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

一個 bsp 獵豹 oid col spa 移動 clas 搜狗

手機瀏覽器種類:

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; 必須結合的屬性,設置或檢索伸縮盒對象的子元素的排列方式。

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