text-overflow

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

SVG 中的 text-overflow 屬性指定當文字溢位行框時,塊級文字內容元素的渲染方式。例如,當 white-space 屬性或 CSS 屬性 的值為 nowrap 時,可能會發生這種情況。該屬性不適用於預格式化文字或位於路徑上的文字。

在 SVG 中,如果存在一個有效指定的換行區域,text-overflow 就會生效,而與文字內容塊元素的 overflow 屬性的計算值無關。這種效果純粹是視覺上的:被裁剪的文字不會從 DOM 中移除,任何省略號(如果顯示)本身也不會成為 DOM 的一部分。對於所有 DOM 方法來說,就好像 text-overflow 沒有被應用一樣,就好像換行區域沒有約束文字一樣。

注意: 作為一個表示屬性,text-overflow 還有一個對應的 CSS 屬性:text-overflow。當兩者都被指定時,CSS 屬性具有更高的優先順序。

用法說明

clip | ellipses
預設值 clip
可動畫的
clip

任何溢位換行區域的文字都將被裁剪。字元可能會被部分渲染。這是預設值。

ellipsis

如果需要渲染的文字溢位了換行區域,文字將被裁剪,並渲染一個省略號,使其適合給定的區域。

有關更多資訊,請參閱 CSS text-overflow 屬性。

規範

規範
CSS 溢位模組第 3 級
# text-overflow
Scalable Vector Graphics (SVG) 2
# TextOverflowProperty

瀏覽器相容性

另見