CSS 限制行數：文字超過單行/多行使用省略符號 (line-clamp / ellipsis)

在切版商品卡片或文章列表時，常會遇到標題或摘要文字過長溢出導致版面高低不一。這時透過 CSS 限制行數，定義文字超過單行、兩行或三行時自動在結尾顯示 ... 省略符號（text-overflow: ellipsis 與 -webkit-line-clamp），就能讓卡片高度保持整齊。以下直接提供最實用的單行與多行省略 CSS 範本。

線上預覽範例：CodePen Demo

/* 單行省略：限制文字顯示 1 行 */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 多行省略：限制文字顯示 2 行 */
.ellipsis-multiple {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

---

單行省略（限制 1 行顯示 ...）

如果只需要限制文字在單行內顯示並截斷，核心是由三個屬性搭配組成：

1. white-space: nowrap;：強制文字不換行，維持在同一行（相關換行控制可參考 CSS 文字換行、單字換行、不換行）。
2. overflow: hidden;：將超出容器寬度的文字隱藏。
3. text-overflow: ellipsis;：在截斷處自動補上 ... 省略號。

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

單行省略因為已經用 white-space: nowrap; 強制文字排成一行，所以不需要另外對區塊設定固定高度（但容器本身必須具備明確寬度或 max-width，若在 Flex 子元素內則需加上 min-width: 0）。

---

多行省略（限制 2 行或 N 行顯示 ...）

在多行省略中，我們需要讓文字能夠正常換行，並在指定行數結尾截斷。因此必須移除 white-space: nowrap;，改用 -webkit-box 彈性盒模型搭配 -webkit-line-clamp：

.ellipsis-multiple {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制顯示行數，可改為 3、4... */
  overflow: hidden;
  text-overflow: ellipsis;
}

如果在某些字型或加上內距（padding）的容器中，發現設定了 -webkit-line-clamp: 2 後，雖然第二行結尾出現了省略符號，但第三行上半部卻露出一點點殘影，這時就需要明確指定 line-height 與 height（或 max-height）：

.ellipsis-multiple {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;

  /* 明確綁定行高與容器高度 */
  line-height: 20px;
  height: 40px; /* 或 max-height: 40px */
}

多行省略的注意事項

多行省略的 height 與 line-height 必須根據目前網站使用的字型進行微調。尤其不同瀏覽器預設的 line-height: normal 計算結果不同，若未明確指定數值，很容易出現本該被遮住的下一行文字頂端：

.ellipsis-multiple {
  /* 若維持預設 normal，容易因字型行距差異露出下一行頂部 */
  line-height: normal;
}

多行省略 – 建議設置參數與計算公式

實務上為了確保跨瀏覽器視覺一致，建議採用以下黃金計算規則：

1. line-height 不要設為 normal：請給定明確的 px 或倍數（例如 1.5）。
2. line-height 應大於 font-size：建議設為 font-size 加上 4px ~ 8px，閱讀起來才不會過於擁擠。
3. height（或 max-height）等於 line-height × 限制行數：

.ellipsis-two-lines {
  font-size: 14px;

  /* line-height = font-size + 6px */
  line-height: 20px;

  /* height = line-height (20px) × 行數 (2) */
  height: 40px;
}

依照這個比例設定後，文字行距在視覺上既舒適，也不會意外露出第三行的上半部。

---

單行省略 vs. 多行省略屬性對照表

比較項目	單行省略（1 行）	多行省略（2 行以上）
換行設定	必加 white-space: nowrap	不可加 nowrap（需允許換行）
盒模型設定	一般區塊（block）即可	必加 display: -webkit-box 與 -webkit-box-orient: vertical
行數控制	無需設定（固定 1 行）	-webkit-line-clamp: 行數
溢出隱藏	overflow: hidden + text-overflow: ellipsis	overflow: hidden + text-overflow: ellipsis

線上預覽範例：CodePen Demo

---

參考資料

• MDN Web Docs: -webkit-line-clamp
• MDN Web Docs: text-overflow