在網頁開發中，多行文本溢出是常見的界面問題。當文本內容超出容器限定的高度和寬度時，若不做處理會破壞頁面布局的整潔性，影響用戶體驗。本文將詳細介紹兩種主流的多行文本溢出解決方案，并從多個維度進行對比，幫助開發者根據實際需求選擇最合適的方法。

一、使用 CSS 控制多行文本溢出顯示

CSS 是處理文本溢出最直接、高效的方式，通過組合特定的 CSS 屬性，可以實現多行文本溢出時顯示省略號的效果，且兼容性在現代瀏覽器中表現良好。

1.1 核心 CSS 屬性組合

實現多行文本溢出顯示省略號，需要依賴以下幾個 CSS 屬性的協同作用：

• overflow: hidden：該屬性用于隱藏容器內超出部分的內容，是實現溢出處理的基礎。若不設置此屬性，溢出的文本會直接超出容器邊界，無法達到預期效果。

• text-overflow: ellipsis：此屬性用于在文本溢出時顯示省略號（...），但需要注意的是，它僅在單行文本溢出且配合white-space: nowrap時生效，在多行文本場景中，必須結合其他屬性才能發揮作用。

• display: -webkit-box：將元素設置為彈性盒模型，為后續的文本行數控制提供支持，這是實現多行溢出省略的關鍵屬性之一，目前主流瀏覽器（Chrome、Safari、Edge 等）均支持該屬性。

• -webkit-line-clamp: n：用于指定文本顯示的最大行數，其中n為具體的行數數值（如 2、3 等）。當文本行數超過設定值時，超出部分會被隱藏，并在末尾顯示省略號。

• -webkit-box-orient: vertical：設置彈性盒模型中文本的排列方向為垂直方向，確保文本按照從上到下的順序排列，與-webkit-line-clamp配合使用，才能準確控制多行文本的顯示。

1.2 完整代碼示例

.multi-line-css {width: 300px;height: 80px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;line-height: 26px; font-size: 16px;
}

<div class="multi-line-css">這是一段用于測試多行文本溢出的內容，通過CSS屬性組合，可以實現當文本超出3行時，自動隱藏超出部分并顯示省略號，保持頁面布局的整潔性。
</div>

在上述代碼中，容器高度（height）需根據line-height和-webkit-line-clamp的數值進行計算（如line-height:26px、-webkit-line-clamp:3時，容器高度可設為26px*3≈80px），確保文本剛好在設定行數時溢出。

1.3 優缺點分析

• 優點：實現方式簡單，僅需幾行 CSS 代碼，無需額外的 HTML 結構或 JavaScript 邏輯；性能優秀，由瀏覽器原生渲染處理，不會增加頁面的性能負擔；兼容性較好，支持絕大多數現代瀏覽器，滿足日常開發需求。

• 缺點：-webkit-line-clamp屬性屬于 WebKit 內核的私有屬性，雖然主流瀏覽器均已支持，但在部分老舊瀏覽器（如 IE）中無法正常工作；無法自定義省略號的樣式（如顏色、大小），且省略號只能固定在文本末尾，靈活性相對有限。

二、單獨用 div 模擬…效果

這種方法通過創建額外的 div 容器和偽元素，模擬文本溢出時的效果。

2.1 實現原理

1. 首先創建一個固定尺寸的容器（外層 div），用于包裹文本內容，設置overflow: hidden隱藏溢出部分，確保默認狀態下文本不會超出容器。

2. 添加一個div元素用于模擬 … 的效果，并使其浮動在容器的右側。

3. 使用偽元素（如::before）為容器添加占位，將文本擠壓到容器的邊緣，實現省略號效果。

4. 將實際文本內容通過margin-top: -XXpx，將原始文本內容上浮，讓最后一行和省略號平齊。

2.2 完整代碼示例

.container {width: 200px;height: 100px;border: 1px solid #ddd;padding: 10px;overflow: hidden;
}
.text-container {height: 100px;overflow: hidden;
}
.text-container::before {content: "";height: 80px;display: block; 
}
.more {float: right;margin-top: -5px;
}
.content {margin-top: -80px;line-height: 25px;
}

<div class="container"><div class="text-container"><div class="more">...</div><div class="content">這是一段用于測試多行文本溢出的內容，通過div加偽元素的方式，當鼠標hover時，完整文本會上浮顯示方便用戶查看所有內容，同時不影響默認狀態下的頁面布局。</div></div>
</div>

2.3 優缺點分析

• 優點：靈活性高，可自定義完整文本的顯示樣式（如背景色、陰影、邊框）；兼容性極佳，不依賴任何私有屬性，支持所有瀏覽器，包括老舊版本的 IE；交互性強，通過鼠標 hover 即可查看完整文本，無需額外的點擊操作。

• 缺點：需要額外的 HTML 結構（內層 div）和偽元素，代碼量相對較多；

三、兩種方法的全面對比

為了幫助開發者在實際項目中快速選擇合適的方法，下表從多個關鍵維度對兩種多行文本溢出處理方法進行對比：

對比維度	CSS 控制溢出顯示	div + 偽元素文本上浮
實現復雜度	低，僅需 CSS 屬性組合，無額外結構	中，需額外 HTML 結構和偽元素
兼容性	較好，支持現代瀏覽器，不支持舊 IE	極佳，支持所有瀏覽器（包括舊 IE）
交互性	無交互，僅顯示省略號	無交互，僅顯示省略號
樣式靈活性	低，無法自定義省略號樣式	低，可以自定義省略號樣式
適用場景	僅需展示部分文本，無需查看完整內容（如列表標題、卡片摘要）	需要查看完整文本，且不破壞原有布局（如表格內容、注釋說明）

四、總結與選擇建議

兩種多行文本溢出處理方法各有優劣，開發者需根據項目的實際需求進行選擇：

• 若項目以現代瀏覽器為目標，僅需簡單展示文本摘要，無需用戶查看完整內容，優先選擇 CSS 控制溢出顯示的方法，其簡潔的代碼和優秀的性能能有效提升開發效率。

• 若項目需要兼容老舊瀏覽器，或需要讓用戶查看完整文本，同時希望有更靈活的樣式和交互效果，推薦選擇 div 的方法，雖然代碼量稍多，但能滿足更復雜的業務場景。

在實際開發中，還可以結合兩種方法的優勢進行拓展，例如：在 CSS 控制溢出顯示的基礎上，添加點擊事件彈出完整文本彈窗，兼顧簡潔性和交互性，為用戶提供更優質的體驗。