在現代網頁設計中，文字的呈現方式對於整體視覺效果有著關鍵性的影響。隨著響應式網頁設計的普及，如何在不同裝置上優雅地處理文字溢出的問題，成為許多前端工程師關注的焦點。本文將分享一些實用的 CSS 技巧，協助您在網頁設計中完美處理文字截斷的問題。

優雅的幫文字截斷，讓響應式網頁設計排版更美觀的小技巧！

為什麼文字截斷對網頁設計很重要？

在進行網頁設計時，我們經常會遇到標題或內容文字過長的情況。若不妥善處理，可能會破壞整體版面的美觀，特別是在響應式網頁設計中，更容易出現排版混亂的問題。適當的文字截斷不僅能維持版面的整潔，還能提升使用者體驗。

CSS 文字截斷的實作方式

以下是兩種常用的文字截斷技巧，適用於不同的網頁設計情境：

1. 單行文字截斷

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

這種方式特別適合處理標題、商品名稱等需要在單行內呈現的文字。在響應式網頁設計中，它能確保文字在各種螢幕寬度下都維持整齊的排版。

說明：

• overflow: hidden;隱藏超出容器的內容
• text-overflow: ellipsis;用省略號(...)表示被截斷的文字
• white-space: nowrap;防止文字換行，強制在同一行

2. 多行文字截斷

css
.truncate-multi {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

這個技巧適用於文章摘要、產品描述等較長的文字內容，能夠在指定行數後優雅地顯示省略號。

說明：

• display: -webkit-box;使用 webkit 的 box 佈局
• -webkit-box-orient: vertical;設置垂直方向排列
• -webkit-line-clamp: 2;限制顯示的行數為 2 行
• overflow: hidden; 隱藏超出的內容

瀏覽器支援度比較

瀏覽器
單行截斷支援
多行截斷支援
Chrome
✓
✓
Firefox
✓
✓ (需使用替代方案)
Safari
✓
✓
Edge
✓
✓

Firefox 多行文字截斷實作指南：跨瀏覽器解決方案

在網頁設計時，Firefox 對於多行文字截斷的處理方式與其他主流瀏覽器略有不同。以下介紹幾種可靠的解決方案，確保您的網站在 Firefox 上也能完美呈現多行文字截斷效果。

方案一：使用 line-height 與 max-height 結合

這是最簡單且廣泛支援的解決方案：

css
.truncate-multi-firefox {
  display: block;
  line-height: 1.5em;     /* 設定行高 */
  max-height: 3em;        /* 行高 × 想要顯示的行數 */
  overflow: hidden;
  position: relative;
}

/* 添加漸層效果取代省略號 */
.truncate-multi-firefox::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 1.5em;
  background: linear-gradient(to bottom, transparent, white);
}

方案二：Flexbox 解決方案

若需要更精確的控制，可以使用 Flexbox：

css
.truncate-multi-firefox-flex {
  display: flex;
  flex-direction: column;
  max-height: calc(1.5em * 3); /* 行高 × 行數 */
  overflow: hidden;
  text-overflow: ellipsis;
}

方案三：使用 JavaScript 輔助實作

當需要更動態的控制時，可以考慮使用 JavaScript：

javascript
function truncateText(element, lines) {
  const lineHeight = parseFloat(getComputedStyle(element).lineHeight);
 element.style.maxHeight = `${lineHeight * lines}px`;
 element.style.overflow = 'hidden';
}

css
.truncate-multi-js {
  position: relative;
  line-height: 1.5;
}

效能與維護考量

1. CSS 方案的優點：
   • 執行效能較好
   • 程式碼較簡潔
   • 維護成本較低
2. JavaScript 方案的優點：
   • 可動態調整截斷行數
   • 支援複雜的互動效果
   • 可精確控制文字顯示

最佳實踐建議

考慮到跨瀏覽器相容性和維護性，建議採用以下做法：

1. 優先使用純 CSS 解決方案
2. 為特定瀏覽器提供專門的 CSS fallback
3. 只在必要時才使用 JavaScript 方案
4. 確保漸進增強的使用體驗

實作注意事項

1. 確保背景顏色與漸層效果相匹配
2. 考慮到深色模式的適配
3. 測試不同字體大小的顯示效果
4. 確保響應式設計下的效果一致性

藉由上述解決方案，您可以確保網站在 Firefox 瀏覽器上也能呈現出專業且一致的文字截斷效果，提供更好的使用者體驗。適當的跨瀏覽器支援不僅能提升網站的專業度，更能確保所有使用者都能獲得相同的優質體驗。

實際應用案例

在現代網頁設計中，這些文字截斷技巧可以應用在多種場景：

1. 新聞網站的文章標題
2. 電商網站的商品描述
3. 部落格文章的摘要
4. 社群媒體的動態內容

效能考量

在網頁設計時，適當的文字截斷不只能提升視覺效果，還能降低渲染負擔。相比使用 JavaScript 進行文字處理，純 CSS 的解決方案能提供更好的效能表現。