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


手機瀏覽器種類:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM