CSS中的三分之二省略號可以讓文本在到達一定長度時以省略號的形式顯示,常用于制作響應式布局中的文本截斷效果。
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ellipsis樣式類可以讓元素內的文本顯示為三分之二省略號。其中overflow:hidden讓文本超出元素部分隱藏,white-space:nowrap是讓文本在一行顯示,text-overflow:ellipsis則是使用省略號顯示超出部分。
可以使用該樣式類來截斷長段文字,如在博客列表中顯示文章標題,同時避免標題文字過長導致排版混亂。例如:
我是一篇長長的文章標題,但只顯示三分之二...
在以上代碼中,class為blog-title的元素將會使用.ellipsis樣式類,保證標題文字能夠以省略號形式截斷,避免影響其它元素排布。
總之,使用CSS三分之二省略號可以為網頁排版帶來美觀和簡潔的視覺效果,讓用戶在快速獲取信息的同時也能舒適地瀏覽網頁。