如何在固定寬度的 Div 中建立帶有省略號的多行文字溢出？

跨瀏覽器多行文字溢出，並以固定寬度和高度附加省略號

問題：

如何我們🎜>問題：

如何我們🎜>問題：

如何我們🎜>問題：

如何我們可以在<div> 上建立省略號嗎？具有固定寬度和多行，確保溢出的文字被截斷？

解決方案：
2. 為了實現這一點，我們可以利用jQuery 程式碼片段來重複刪除文字的最後一個單詞，直到它符合所需的範圍

3. 實作：

   • 定義<div>的 HTML 標記具有固定的寬度和高度，以及包含文字的段落 (

     )。

   • 新增 CSS 將溢位設定為隱藏，確保截斷保持不可見。
   • 建立一個 jQuery 函數來執行截斷。此函數將：

     擷取

     元素並將其儲存在 $p 變數中。 計算

     <div> 的高度並儲存在 divh 變數中。
     使用 while 循環刪除文字的最後一個單詞，直到它適合所需的高度。這個循環使用 text() 函數來更新

     的內容。帶有更新的截斷文字。

     其他注意事項：

     此方法涉及用於截斷的 JavaScript。考慮將其與伺服器端截斷相結合以提高效能。 向

     添加width: 100% CSS 確保它佔據了整個寬度

     <div>

     範例：

     #fos {
       width: 300px;
       height: 190px;
       overflow: hidden;
     }
     
     #fos p {
       width: 100%;
       padding: 10px;
       margin: 0;
     }

     範例：

     var $p = $('#fos p');
     var divh = $('#fos').height();
     
     while ($p.outerHeight() > divh) {
       $p.text(function (index, text) {
         return text.replace(/\W*\s(\S)*$/, '...');
       });
     }

     例如ML
     CSSjQuery