欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css+多余字省略號

錢琪琛2年前8瀏覽0評論

CSS語言是一種文本樣式語言,它可以控制網(wǎng)頁中的文本,圖片和布局等元素的樣式。其中,省略號就是常用的字?jǐn)?shù)太多而導(dǎo)致無法完全顯示的情況下,用于代替多余字的符號,但是我們?nèi)绾卧贑SS中使用省略號呢?

/*單行超出用省略號顯示*/
.text{
white-space: nowrap; /*強(qiáng)制不換行*/
overflow: hidden; /*隱藏超出部分*/
text-overflow: ellipsis; /*用省略號代替超出部分*/
}
/*多行超出用省略號顯示*/
.text{
display: -webkit-box;/*將對象作為彈性伸縮盒子模型顯示*/
-webkit-line-clamp: 2;/*顯示的行數(shù)*/
-webkit-box-orient: vertical;/*從上往下排列*/
overflow: hidden;/*超出部分隱藏*/
text-overflow: ellipsis;/*用省略號代替超出部分*/
}

以上的CSS代碼分別是用于單行和多行超出時使用的省略號樣式。其中,使用text-overflow: ellipsis;來實(shí)現(xiàn)省略號的顯示。需要注意的是,單行顯示省略號時,需要配合white-space: nowrap;屬性來強(qiáng)制不換行,而多行顯示省略號時,需要使用display: -webkit-box;屬性來將對象作為彈性伸縮盒子模型顯示。

綜上所述,使用CSS中的省略號技巧可以很好地解決文字過長導(dǎo)致文字顯示不全的問題,提高頁面的美觀程度和閱讀體驗(yàn)。