CSS text-overflow 屬性
示例
text-overflow 屬性的用法
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
text-overflow 屬性指定了如何向用戶顯示未顯示的溢位內容。它可以被裁剪、顯示省略號 (...) 或顯示自定義字串。
以下兩個屬性都是 text-overflow 所必需的：
- white-space: nowrap;
- overflow: hidden;
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| text-overflow | 4 | 6 | 7 | 3.1 | 11 |
CSS 語法
text-overflow: clip|ellipsis|string|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| clip | 預設值。文字將被裁剪，無法訪問。 | 演示 ❯ |
| ellipsis | 渲染一個省略號 ("...") 來表示被裁剪的文字。 | 演示 ❯ |
| string | 渲染給定的字串來表示被裁剪的文字。 | |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
帶有懸停效果的文字溢位（懸停時顯示完整文字）
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 文字效果
HTML DOM 參考：textOverflow 屬性
