CSS 文字太長自動變成「…」：單行與多行省略寫法（text-overflow、line-clamp）

商品名稱、文章標題、卡片摘要這類文字，長度常常不固定。太長的文字會把卡片撐高、撐破，一整排卡片就對不齊了。

用 CSS 可以讓文字超過指定長度時自動截斷，結尾顯示「…」，完全不用改內容。

單行省略：超過一行就變「…」

.one-line {
  white-space: nowrap;     /* 不換行 */
  overflow: hidden;        /* 超出的部分隱藏 */
  text-overflow: ellipsis; /* 結尾顯示 … */
}

三行缺一不可：

• white-space: nowrap：讓文字維持一行，不自動換行。
• overflow: hidden：超出寬度的部分藏起來。
• text-overflow: ellipsis：在截斷的地方加上「…」。

另外元素必須有寬度限制（區塊元素預設就是外層的寬度；span 這類行內元素要先改成 display: block 或 inline-block 並給寬度）。

多行省略：超過兩行、三行才變「…」

卡片摘要通常希望顯示兩到三行，用 line-clamp：

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

雖然有 -webkit- 開頭的寫法，但這組寫法所有主流瀏覽器都支援（包含 Firefox），是目前多行省略的標準做法。最後的 line-clamp: 3 是未來的正式寫法，一起寫上不會有影響。

想要顯示幾行，就把兩個數字一起改成幾。

讓卡片高度整齊的小技巧

就算用了 line-clamp，如果有的摘要只有一行、有的有三行，卡片高度還是會不一樣。可以再給一個固定的最小高度，讓每張卡片都保留三行的空間：

.card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  line-height: 1.6;
  min-height: calc(1.6em * 3); /* 行高 × 行數 */
}

省略號沒出現？常見原因

在 flex 裡面沒效果

Flexbox 的子元素預設不會縮得比內容還窄，文字就直接把外層撐開了。在那個子元素加上 min-width: 0：

.flex-row {
  display: flex;
  gap: 12px;
}

.flex-row .title {
  flex: 1;
  min-width: 0; /* 關鍵:允許縮小 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在表格裡沒效果

表格欄寬預設會跟著內容撐大。在 table 加上 table-layout: fixed 並設定寬度，儲存格才會固定寬度、出現省略號：

table {
  width: 100%;
  table-layout: fixed;
}

td.name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

中英文夾雜時截斷的位置很奇怪

很長的英文網址或連續英文沒有空白時，瀏覽器不知道哪裡可以斷。多行省略時可以加上 overflow-wrap: anywhere;，讓長字串也能在適當位置換行。

被截掉的文字怎麼辦？

截斷只是「看起來」變短，完整的文字還在網頁裡。常見的處理方式：

• 卡片整張可以點，點進去看完整內容（最常見）。
• 在元素加上 title 屬性，滑鼠移上去會顯示完整文字。
• 重要的資訊（價格、日期）不要放在可能被截斷的位置。

延伸閱讀

• CSS div 置中完整整理：水平置中、垂直置中的 6 種寫法
• CSS 圖片填滿 div 不變形：object-fit: cover 用法與固定比例寫法

一排排整齊的卡片、長短不一也不跑版的標題，是網站看起來專業的關鍵細節。想要一個細節做到位的網站，歡迎參考正威網路行銷的基隆網頁設計服務，也服務台北與全台客戶。