在 CSS 中,有時需要在文字中間插入點(diǎn)點(diǎn)點(diǎn),比較常見的就是用在省略某些內(nèi)容的場景中。這個點(diǎn)點(diǎn)點(diǎn)在 CSS 中叫做省略號(Ellipsis),也可以叫做省略號符號(Ellipsis Character)。
在 CSS 中,我們可以使用 text-overflow 屬性來設(shè)置省略號的樣式。下面是一個例子:
p { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
上面的代碼中,我們設(shè)置了一個 p 元素,寬度為 200px,禁止自動換行(white-space: nowrap),文本溢出隱藏(overflow: hidden),并在溢出部分用省略號表示(text-overflow: ellipsis)。
需要注意的是,text-overflow 屬性只能用于單行文本,如果要處理多行文本的省略,我們需要結(jié)合其他屬性,比如 line-clamp 和 display。
另外,不同瀏覽器可能對省略號的樣式顯示會有略微差別,常見的差別有省略號的位置、大小和顏色等。如果要在不同瀏覽器上都得到一致的效果,可以使用瀏覽器前綴以及一些 hack 方法。
下一篇div上顏色