CSS中ellipsis是用來實現文本溢出顯示省略號的方法。它可以應用在任何可能的元素中。
利用以下CSS屬性來實現ellipsis效果:
text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
其中,text-overflow: ellipsis;
是必要的,用于表示省略號的樣式。white-space: nowrap;
保證文本不會換行,overflow: hidden;
則將超出顯示范圍的部分隱藏起來。
可以在單行和多行文本中使用ellipsis效果。在單行文本中,只需將以上屬性應用在任何元素中,例如一個div或者p標簽。在多行文本中,則需要應用一個額外的CSS屬性:
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;/* 顯示兩行 */
這個屬性通過使用word-break或word-wrap屬性時,可以將文本內容斷開成幾行。-webkit-line-clamp屬性表示需要顯示的行數。
當然,如果要完全實現ellipsis效果,還需要注意展示效果的一些細節,例如字體大小、文本內容長度等等。這些因素對ellipsis效果的最終呈現有一定的影響。
上一篇CSS后代選擇器用法