如何在固定寬高的div中實現(xiàn)文本超出第二行時的省略號顯示效果？

巧妙控制div文本顯示：第二行溢出顯示省略號

前端開發(fā)中，經(jīng)常需要在固定尺寸的div內(nèi)顯示文本，而當文本超過div大小，特別是超出第二行時，如何優(yōu)雅地處理溢出內(nèi)容是一個常見挑戰(zhàn)。本文將介紹一種方法，讓超出第二行的文本以省略號（…）結尾。

問題：假設有一個固定寬度和高度的div，需要在其中顯示一段文字。當文字超過兩行時，如何只顯示前兩行，并在末尾添加省略號？

解決方案：利用css的display: -webkit-box、-webkit-line-clamp、-webkit-box-orient和overflow屬性組合實現(xiàn)。

示例代碼：

<div class="text">   浮動元素是如何定位的？正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。 </div>

.text {   width: 200px;   height: 38px;   display: -webkit-box;   -webkit-line-clamp: 2;   -webkit-box-orient: vertical;   overflow: hidden; }

代碼解釋：

• display: -webkit-box;：啟用WebKit的彈性盒子模型。
• -webkit-line-clamp: 2;：限制文本顯示行數(shù)為2行。
• -webkit-box-orient: vertical;：設置彈性盒子的方向為垂直。
• overflow: hidden;：隱藏超出div范圍的內(nèi)容。

這種方法在chrome和safari等WebKit內(nèi)核瀏覽器中效果最佳。 對于其他瀏覽器，可能需要考慮使用JavaScript或其他CSS技巧來實現(xiàn)兼容性。