跨浏览器多行文本溢出，省略了宽度和高度附加的省略号`< div>` [英] Cross-browser multi-line text overflow with ellipsis appended within a width and height fixed `<div>`

问题描述

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

I made an image for this question to make it easier to understand.

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

Is it possible to create an ellipsis on a <div> with a fixed width and multiple lines?

我已经尝试了一些jQuery插件，但找不到我正在寻找的那个。有什么建议？想法？

I’ve tried some jQuery plugins out here and there, but cannot find the one I’m looking for. Any recommendation? Ideas?

推荐答案

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

Just a quick basic idea.

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

I was testing with the following markup:

<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将实现所需的结果：

Applying this jQuery will accomplish the desired result:

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

它反复尝试删除文本的最后一个单词，直到达到所需的尺寸。因为溢出：隐藏;这个过程仍然是隐形的，即使关闭了JS，结果仍然是视觉上正确（当然没有......）。

It repeatedly tries to remove the last word of the text until it reaches the desired size. Because of the overflow: hidden; the process remains invisible and even with JS turned off the result remains 'visually correct' (without the "..." of course).

如果你将它与服务器端的合理截断（只留下很小的开销）然后它会更快运行:)。

If you combine this with a sensible truncation on the server-side (that leaves only a small overhead) then it will run quicker :).

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

Again, this is not a complete solution, just an idea.

更新：添加了 jsFiddle演示。

这篇关于跨浏览器多行文本溢出，省略了宽度和高度附加的省略号`< div>`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！