[CSS]text-overflow - 文字太常溢出的字元替代為...

當文字內容超出容器寬度時，預設會換行或溢出容器。text-overflow 屬性可以讓溢出的文字以省略號（...）或其他方式顯示，提升使用者介面的整潔度。

基本語法

1

text-overflow: clip | ellipsis | string | initial | inherit;

• clip：預設值，直接裁切溢出的文字
• ellipsis：以 ... 取代溢出的部分
• string：自訂替代字串（瀏覽器支援度有限）

必要的搭配屬性

text-overflow 單獨使用無效，必須同時設定以下兩個屬性才能生效：

1
2
3
4
5

.truncate {
  white-space: nowrap;    /* 禁止換行 */
  overflow: hidden;       /* 隱藏溢出內容 */
  text-overflow: ellipsis; /* 顯示省略號 */
}

三個屬性缺一不可：

1. white-space: nowrap — 讓文字不換行，才會產生溢出
2. overflow: hidden — 隱藏溢出的部分
3. text-overflow: ellipsis — 在隱藏處顯示 ...

單行省略範例

1

<div class="truncate">這是一段很長的文字，會被截斷並顯示省略號...</div>

1
2
3
4
5
6

.truncate {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行省略（-webkit-line-clamp）

若需要限制顯示行數（例如只顯示兩行），可使用 -webkit-line-clamp：

1
2
3
4
5
6

.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* 最多顯示 2 行 */
  overflow: hidden;
}

現代瀏覽器（Chrome、Firefox、Safari）均已支援 line-clamp 屬性，但 display: -webkit-box 仍是目前最廣泛相容的寫法。

實際應用場景

• 商品名稱、文章標題：限制在一行內顯示
• 文章摘要：限制顯示行數，保持列表整齊
• 表格儲存格：避免長文字破壞表格排版

參考資料

• MDN: text-overflow
• W3Schools: CSS text-overflow