實際效果：第三行出現省略號，但是第四行依舊顯示了部分文字
這個問題通常是由于?CSS 多行文本截斷（-webkit-line-clamp）的計算方式或布局沖突導致的。以下是完整解決方案，確保三行文本截斷正確顯示省略號，并隱藏第四行及之后的文本。
🔍 問題原因分析
-
-webkit-line-clamp?未正確計算高度-
可能被父容器?
height、max-height?或?flex?布局干擾。
-
-
line-height?計算不準確-
如果?
line-height?與容器高度不匹配，可能導致截斷失效。
-
-
display: -webkit-box?被覆蓋-
其他 CSS 屬性（如?
display: flex）可能覆蓋了?-webkit-box。
-
-
父容器?
overflow?設置錯誤-
必須確保父容器?
overflow: hidden。
-
? 終極解決方案
1. 修正 CSS（確保三行截斷）
.truncate-3-lines {display: -webkit-box; /* 關鍵：使用舊版 Flexbox 模型 */-webkit-line-clamp: 3; /* 限制為 3 行 */-webkit-box-orient: vertical; /* 垂直排列 */overflow: hidden; /* 隱藏溢出內容 */text-overflow: ellipsis; /* 超出部分顯示省略號 */line-height: 1.5; /* 行高（確保 3 行 = 1.5 × 3 = 4.5em） */max-height: 4.5em; /* 最大高度 = 行高 × 行數（可選） */word-break: break-word; /* 處理長單詞或 URL */
}
2. 檢查 HTML 結構
<div class="text-container"><p class="truncate-3-lines">這里是需要截斷的長文本，超過三行時會顯示省略號...（測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字）</p> </div>
3. 關鍵排查點
| 問題 | 解決方法 |
|---|---|
-webkit-line-clamp?不生效 | 確保父容器沒有?height?或?overflow: visible |
| 第四行仍然顯示部分文字 | 檢查?line-height?是否計算正確（3行 =?1.5 × 3 = 4.5em） |
| Flex/Grid 布局沖突 | 在 Flex/Grid 子項上加?min-width: 0 |
| 長單詞或 URL 導致換行 | 添加?word-break: break-word |
🚀 實際應用示例
情況 1：普通 div 截斷
<div class="truncate-3-lines">這個 div 里的文字會被限制在三行，超出部分顯示省略號... </div>
情況 2：Flex 布局下的截斷（常見問題！）
<div style="display: flex;"><div style="flex: 1; min-width: 0;"> <!-- 關鍵：min-width: 0 修復截斷 --><p class="truncate-3-lines">在 Flex 布局里，必須加 min-width: 0 才能正確截斷！</p></div> </div>
情況 3：表格或卡片內截斷
<div class="card"><h3>標題</h3><p class="truncate-3-lines">卡片內的文字限制三行，超出的部分隱藏并顯示省略號...</p> </div>
📌 最終驗證
-
檢查?
-webkit-line-clamp?是否生效-
在瀏覽器 DevTools 里檢查?
.truncate-3-lines?的?computed styles：-
display: -webkit-box -
-webkit-line-clamp: 3 -
overflow: hidden
-
-
-
檢查?
line-height?計算-
確保?
max-height = line-height × 3（如?1.5 × 3 = 4.5em）。
-
-
測試長文本和短文本
-
短文本（≤3行）：正常顯示，無省略號。
-
長文本（>3行）：正確截斷，顯示?
...。
-
💡 總結
-
必須使用?
display: -webkit-box?+?-webkit-line-clamp（目前僅 WebKit/Blink 瀏覽器支持）。 -
Flex/Grid 布局需加?
min-width: 0，否則截斷失效。 -
line-height?必須計算正確（3行 =?1.5em × 3 = 4.5em）。 -
檢查父容器?
overflow，必須是?hidden?或?clip。
