CSS文字溢位換行-單行/多行
阿新 • • 發佈:2018-11-25
需求:為了不影響美觀,很多時候,需要用到文字溢位顯示“...”。
來看一下圖
藍色部分是盒子的大小,需要溢位顯示“...”
#wrapper1 {
overflow: hidden; /*超出的文字隱藏*/
text-overflow: ellipsis; /*溢位用省略號顯示*/
white-space: nowrap; /*溢位不換行*/
}
結果如下:
-------------------接下來我們看看多行文字溢位顯示“....”--------------------------------
查閱資料給的程式碼如下:
#wrapper2 {
display: -webkit-box;/*將物件作為彈性伸縮盒子模型顯示。*/
-webkit-box-orient: vertical;/*從上到下垂直排列子元素(設定伸縮盒子的子元素排列方式)*/
-webkit-line-clamp: 2;/*這個屬性不是css的規範屬性,需要組合上面兩個屬性,表示顯示2行。 */
}
效果:%¥&…@!WTF?為啥不起作用?趕緊F12看看
奇怪了,為啥不起作用,然後仔細的讀了一下,程式碼的註釋。
既然是多行文字溢位 ,那麼首先應該是顯示多行,於是乎程式碼如下:
#wrapper2 { word-break: break-all; word-wrap: break-word; display: -webkit-box;/*將物件作為彈性伸縮盒子模型顯示。*/ -webkit-box-orient: vertical;/*從上到下垂直排列子元素(設定伸縮盒子的子元素排列方式)*/ -webkit-line-clamp: 2;/*這個屬性不是css的規範屬性,需要組合上面兩個屬性,表示顯示2行。 */ }
再來看看效果:
好像。。。和我們想要的效果有點不一樣。其實重點就是這-webkit-line-clamp: 2,設定了2行。
那麼剩下的,溢位隱藏就好
#wrapper2 { word-break: break-all; word-wrap: break-word; overflow: hidden; display: -webkit-box;/*將物件作為彈性伸縮盒子模型顯示。*/ -webkit-box-orient: vertical;/*從上到下垂直排列子元素(設定伸縮盒子的子元素排列方式)*/ -webkit-line-clamp: 2;/*這個屬性不是css的規範屬性,需要組合上面兩個屬性,表示顯示2行。 */ }
打完收工!
tips:多行文字溢位顯示“...”只有crom和safari得到支援(部分),IE就不要想了。
-webkit-line-clamp: