在網頁設計中,經常會出現字符過長的情況,為了美觀起見,需要將超出一定長度的字符進行省略號處理。這時候,就需要使用CSS的ellipsis屬性。
.text-ellipsis{ display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
上述CSS樣式中,設置了元素的display為inline-block,這樣可以讓元素在一行中顯示。接著,white-space設為nowrap,這樣可以防止文本換行。overflow:hidden可以讓超出元素的內容隱藏。text-overflow: ellipsis則是讓超出的文本顯示省略號,最后,設置元素的max-width可以限制元素的寬度,超出部分就會被隱藏掉。
可以把上述樣式應用到p標簽中:
這是一個很長的文字,如果不處理就會很丑陋,使用ellipsis屬性可以讓省略號更好地展現。
以上就是CSS中ellipsis屬性的用法,如果需要對文本進行省略號處理的話,這個屬性是很好的選擇。
上一篇css超出容器不換行