卡片標題太長只剩半句：何時用省略號，何時保留兩行

模板列表的卡片很整齊，標題卻只剩「影片網站模板挑選…」，訪客看不出後面是價格、版型，還是安裝條件。省略號能控制高度，但也可能剛好藏掉他需要判斷的資訊。

先看標題被藏掉的是什麼

只顯示名稱的短列表，單行常已足夠；教學文章、商品差異或操作條件較多時，保留兩行通常更容易判斷要不要打開。先把最重要的詞寫在前面，再決定顯示幾行，別讓CSS替冗長標題負擔所有工作。

單行省略需要三個條件一起用

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

text-overflow本身不會讓文字溢出或自動縮短。這裡先禁止換行，再隱藏超出範圍的部分，才用省略號表示。如果卡片是flex子項，還要檢查容器是否因最小內容寬度而撐開；必要時對正確的子項設min-width:0，而不是把整頁橫向溢出藏起來。

兩行可以多留一些資訊

.card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

這是一組常見的兩行限制寫法，仍要在你支持的瀏覽器確認呈現。不要同時保留單行的white-space:nowrap；這裡也不承諾所有瀏覽器都一樣。若相容性要求不允許截斷，直接正常換行並接受卡片高度差異，也是一個選擇。

完整入口與窄螢幕都要留意

卡片應能開啟完整文章或商品資料；別只靠滑鼠hover的title提示，手機和鍵盤使用者未必用得到。檢查最長的幾則標題、連續英文、價格或限制詞，並用窄螢幕看實際截斷點。

調整前保存原樣式，只改目標卡片的標題規則；圖片比例、卡片寬度和其他元素先保持原樣。如果圖片也不整齊，另看object-fit圖片裁切，不要把標題省略與圖片裁切混成同一項修正。

參考資料

資料核對：2026年10月4日。文件與瀏覽器行為可能更新。