CSS中的text-overflow屬性可以用來設置文本過長時的顯示方式,其中包括省略號的顯示。通常我們會選擇使用單行省略號,但是有時候需要顯示多行省略號,本文將介紹如何實現CSS中顯示兩行省略號。
.ellipsis { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
在上面的CSS代碼中,我們使用了display屬性的-webkit-box值,它可以讓一個元素作為一個伸縮容器,并且伸縮項目成為該容器的“子元素”。接著使用了overflow:hidden來控制文本溢出時的隱藏,并且使用了text-overflow:ellipsis來顯示省略號。接下來的-webkit-line-clamp:2是使用WebKit瀏覽器內核限制行數的方法,它可以限制文本的行數為2行,同時使用-webkit-box-orient: vertical來保證文本的垂直排列。
上一篇css顯示隱藏的動畫效果
下一篇css顯示默認字體