css實現代碼：
.text-container {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;
}
解釋：
1.-webkit-box 和 -webkit-box-orient 屬性將容器元素設置為一個垂直方向的彈性盒子，并指定了最多顯示三行文本；
2.overflow: hidden 來隱藏超出容器高度的文本；
3.text-overflow: ellipsis 來在文本溢出時顯示省略號；
注意，
-webkit-line-clamp 是一個非標準屬性，只在 WebKit 內核的瀏覽器（如 Chrome 和 Safari）中生效。如果需要兼容其他瀏覽器，可以考慮使用 JavaScript 或其他方法來實現類似的效果。
javascript實現代碼：
<div id="textContainer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum turpis nec orci aliquam, et luctus nisi feugiat.
</div>
var textContainer = document.getElementById("textContainer");
var lineHeight = parseInt(window.getComputedStyle(textContainer).lineHeight);
var maxHeight = lineHeight * 3;if (textContainer.offsetHeight > maxHeight) {while (textContainer.offsetHeight > maxHeight) {textContainer.textContent = textContainer.textContent.replace(/\W*\s(\S)*$/, '...');}
}
解釋：
1.通過 document.getElementById() 方法獲取到 id 為 “textContainer” 的容器元素；
2.window.getComputedStyle() 方法獲取到容器元素的行高（line-height）屬性，并將其轉換為整數；
3.計算出最大高度（maxHeight），即三行文本的高度；
4.檢查容器元素的實際高度是否超過最大高度。如果超過，則進入循環；
在循環中，我們使用正則表達式將容器元素的文本內容逐漸縮短，直到其高度不再超過最大高度為止。我們使用正則表達式\W*\s(\S)*$來匹配最后一個單詞之后的所有字符，并將其替換為省略號。
最終，當容器元素的文本內容被縮短到不再溢出三行時，循環結束。
