在固定寬高的div中，如何在第二行超出時顯示省略號？

固定寬度高度div的多行文本截斷顯示

網頁布局中，經常需要在尺寸固定的div內顯示多行文本。當文本超過div的限制時，如何優雅地在第二行末尾顯示省略號（…）？本文將詳細講解解決方案。

假設一個div，寬度200px，高度38px。我們需要在這個div中顯示文本，并確保超出兩行部分以省略號顯示。

為此，我們可以利用css的-webkit-line-clamp屬性。該屬性限制文本顯示的行數，并在超出時自動添加省略號。具體代碼如下：

<div class="text">   浮動元素定位機制詳解：元素浮動后脫離文檔流，向左或右移動，直到遇到容器邊界或其他浮動元素。 </div>  <style> .text {   width: 200px;   height: 38px;   display: -webkit-box;   -webkit-line-clamp: 2;   -webkit-box-orient: vertical;   overflow: hidden; } </style>

代碼中，我們設置div寬度為200px，高度為38px。display: -webkit-box; 和 -webkit-box-orient: vertical; 將div設置為垂直方向的彈性盒子。-webkit-line-clamp: 2; 限制文本顯示為兩行，超出部分用省略號代替。overflow: hidden; 隱藏超出部分內容。

通過此方法，即可在固定尺寸div中實現多行文本的省略號顯示，優化用戶體驗。