跨浏览器的多行文本溢出,并在固定的宽度和高度内附加了省略号 [英] Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height
问题描述
我为这个问题制作了一个图像,以使其更易于理解。
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演示。
这篇关于跨浏览器的多行文本溢出,并在固定的宽度和高度内附加了省略号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!