移動端頁面實現多行文本溢出顯示省略號...
阿新 • • 發佈:2017-07-16
一個 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; 必須結合的屬性,設置或檢索伸縮盒對象的子元素的排列方式。
移動端頁面實現多行文本溢出顯示省略號...