css實現多行省略的核心方法是使用overflow: hidden;、text-overflow: ellipsis;和-webkit-line-clamp屬性組合。1. 設置容器固定高度以容納指定行數；2. 使用overflow: hidden;隱藏溢出內容；3. 通過text-overflow: ellipsis;添加省略號；4. 應用-webkit-line-clamp: n;限制顯示行數，并配合display: -webkit-box;和-webkit-box-orient: vertical;。由于該屬性為webkit私有，兼容性有限，可采用JavaScript動態截斷文本或使用css漸進增強方案提升兼容性。在響應式設計中，建議使用相對單位、媒體查詢或javascript動態調整行數，以確保不同設備下的顯示效果。
CSS實現多行省略，核心在于利用overflow: hidden;、text-overflow: ellipsis;和-webkit-line-clamp屬性的組合，配合一些巧妙的技巧，讓超出指定行數的文本以省略號結尾。
解決方案： 要實現CSS多行省略，可以采用以下步驟：
- 設置容器高度: 首先，你需要為包含文本的容器設置一個固定的高度，這個高度應該能夠容納你希望顯示的行數。
- 隱藏溢出: 使用overflow: hidden;屬性，將超出容器高度的內容隱藏起來。
- 添加省略號: 使用text-overflow: ellipsis;屬性，當文本溢出時顯示省略號。
- 限制行數: 使用-webkit-line-clamp: N;屬性，其中N是你希望顯示的行數。這個屬性需要配合-webkit-box-orient: vertical;和display: -webkit-box;一起使用，才能生效。
完整的CSS代碼如下：
.multi-line-ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 顯示的行數 */ -webkit-box-orient: vertical; }
注意: -webkit-line-clamp是webkit內核的私有屬性，在一些瀏覽器中可能不兼容。 為了更好的兼容性，可以考慮使用JavaScript來實現多行省略。
立即學習“前端免費學習筆記（深入）”；
如何處理瀏覽器兼容性問題？
雖然-webkit-line-clamp在現代瀏覽器中表現良好，但為了兼容舊版本瀏覽器或者非webkit內核的瀏覽器，可以考慮以下方案：
-
JavaScript實現: 使用JavaScript計算文本的高度，并根據容器的高度和行高來判斷是否需要截斷文本并添加省略號。 這種方法兼容性最好，但實現起來相對復雜。一個簡單的例子：
function truncateText(element, lineHeight, maxLines) { const maxHeight = lineHeight * maxLines; if (element.scrollHeight > maxHeight) { while (element.scrollHeight > maxHeight) { element.textContent = element.textContent.slice(0, -1); } element.textContent = element.textContent.slice(0, element.textContent.lastIndexOf(" ")) + "..."; } } const element = document.querySelector('.my-text'); truncateText(element, 20, 3); // 行高20px，最多顯示3行 -
CSS漸進增強: 先使用兼容性好的css屬性，例如overflow: hidden和text-overflow: ellipsis，然后使用@supports特性查詢來判斷瀏覽器是否支持-webkit-line-clamp，如果支持，則應用該屬性。
.multi-line-ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; /* 兼容性寫法 */ display: -moz-box; display: box; -webkit-box-orient: vertical; /* 兼容性寫法 */ -moz-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 3; /* 顯示的行數 */ } @supports (-webkit-line-clamp: 3) { .multi-line-ellipsis { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } }
多行省略在響應式設計中的應用？
在響應式設計中，容器的寬度可能會發生變化，導致文本顯示的行數也隨之變化。 為了保證多行省略的效果，需要考慮以下幾點：
- 使用相對單位: 容器的高度可以使用em或rem等相對單位，這樣可以根據字體大小自動調整高度。
- 媒體查詢: 可以使用媒體查詢來針對不同的屏幕尺寸設置不同的行數。
- JavaScript動態調整: 可以使用JavaScript監聽窗口大小的變化，并動態調整-webkit-line-clamp的值。
選擇哪種方法取決于你的具體需求和目標瀏覽器的兼容性要求。 如果需要支持舊版本瀏覽器，JavaScript方案是更可靠的選擇。 如果只關注現代瀏覽器，CSS漸進增強方案可以減少JavaScript代碼量。
