如何在固定宽度的 Div 中创建带省略号的多行文本溢出？

跨浏览器多行文本溢出，并以固定宽度和高度附加省略号

问题：

如何我们可以在

<div> 上创建省略号吗？具有固定宽度和多行，确保溢出的文本被截断？

解决方案：

为了实现这一点，我们可以利用 jQuery 代码片段来重复删除文本的最后一个单词，直到它符合所需的范围

实现：

1. 定义 <div> 的 HTML 标记具有固定的宽度和高度，以及包含文本的段落 (

   )。

2. 添加 CSS 将溢出设置为隐藏，确保截断保持不可见。

3. 创建一个 jQuery 函数来执行截断。此函数将：

   • 检索

     元素并将其存储在 $p 变量中。

   • 计算 <div> 的高度并将其存储在 divh 变量中。
   • 使用 while 循环删除文本的最后一个单词，直到它适合所需的高度。该循环使用 text() 函数来更新

     的内容。带有更新的截断文本。

   其他注意事项：

   1. 此方法涉及用于截断的 JavaScript。考虑将其与服务器端截断相结合以提高性能。
   2. 向

      添加 width: 100% CSS 确保它占据了整个宽度

   示例：

   HTML

   <div>

   CSS

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

   jQuery

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

   演示： https://jsfiddle.net/w0n5cy2j/