有時候我們需要在網頁中展示一段較長的文字,但是因為頁面布局的限制,我們希望將這段文字顯示成兩行,同時又不想使用JavaScript等腳本語言去實現。這時候,CSS的文字2行隱藏技巧就可以派上用場了。
具體實現方法如下:
.text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
上述代碼將文字顯示容器的顯示方式設置為基于Webkit內核的彈性盒子布局,并且設置了顯示方向為豎直,最多顯示兩行文字,超出的部分將被隱藏。
還有一點需要注意的是,這種實現方法兼容性并不是很好。它的表現會有所不同,具體情況可能會受到不同瀏覽器的影響。