CSS文字溢出隱藏顯示是一種常用的調(diào)整頁面排版的技術(shù),簡單易用,效果明顯。在網(wǎng)頁設(shè)計中,當文字過長或者排列方式不符合設(shè)計要求時,我們可以通過CSS樣式來控制文字的顯示。
text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
使用以上代碼,可以實現(xiàn)文字溢出隱藏,并在末尾顯示省略號的效果。其中,text-overflow屬性控制溢出文本的方式,ellipsis表示使用省略號表示溢出文本;white-space屬性控制空白符的處理方式,nowrap表示不允許換行;overflow屬性控制溢出元素的可見性,hidden表示隱藏溢出內(nèi)容。
需要注意的是,這些屬性只針對單行文本起作用。若要控制多行文本的溢出,可以使用WebKit瀏覽器的CSS3屬性-webkit-line-clamp,但是在其他瀏覽器中可能無法使用。
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
使用以上代碼,可以實現(xiàn)多行文本溢出隱藏,并在末尾顯示省略號的效果。其中,display屬性值為-webkit-box,-webkit-box-orient屬性值為vertical表示將文本以垂直排列方式顯示;-webkit-line-clamp屬性控制文本溢出時,顯示文本行數(shù);overflow屬性仍然控制多余文本的顯示與隱藏。
總之,CSS文字溢出隱藏顯示是一種非常方便實用的技術(shù),既提高了頁面的排版效果,又增加了Web開發(fā)的靈活性。