CSS 中的“文本溢出省略”可以讓我們在顯示文本時,當它超過容器的寬度或高度時,將其截斷并顯示省略號。這種效果在某些情況下非常有用,比如在顯示較長的文章標題、描述或者表格中的數據時。
下面是一個例子:
在上面的代碼中,我們定義了一個固定寬度為 200px 的段落,并使用 white-space 屬性將其所有空格都去掉,overflow 屬性將超出容器寬度的部分隱藏起來,text-overflow 屬性用省略號代替截斷的文本。
這種效果也可以用在表格中,比如當一個單元格內的文本太長時:table td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }在上面的代碼中,我們定義了一個 CSS 樣式,將表格中所有的單元格文本溢出截斷,并用省略號代替。 需要注意的是,使用“文本溢出省略”效果時,我們需要選擇一個合適的容器大小和字體大小來避免省略號的出現使文本不可讀。另外,在一些瀏覽器中,這種效果的顯示可能會有所差異,需要進行兼容性測試。 綜上所述,CSS 中的“文本溢出省略”效果可以很好的幫助我們在顯示文本時,將超出容器的部分截斷并用省略號代替。它是 Web 開發中非常實用的一個 CSS 技巧。