在固定宽度和高度内附加省略号的跨浏览器多行文本溢出

Question

我为这个问题制作了一张图片，以便更容易理解。

是否可以在具有固定宽度和多行的 <div> 上创建省略号？

我在这里和那里尝试了一些 jQuery 插件，但找不到我正在寻找的那个。有什么推荐吗？想法？

原文由 Edward 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只是一个快速的基本想法。

我正在使用以下标记进行测试：

 <div id="fos">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>
</div>

和CSS：

 #fos { width: 300px; height: 190px; overflow: hidden; }
#fos p { 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)*$/, '...');
    });
}

它反复尝试删除文本的最后一个单词，直到达到所需的大小。因为溢出：隐藏；这个过程仍然是不可见的，即使关闭了 JS，结果仍然是“视觉上正确的”（当然没有“…”）。

如果您将它与服务器端的合理截断相结合（只留下很小的开销），那么它将运行得更快 :)。

同样，这不是一个完整的解决方案，只是一个想法。

更新： 添加了一个 jsFiddle 演示。

原文由 kapa 发布，翻译遵循 CC BY-SA 3.0 许可协议