跨浏览器多行文本溢出与省略号附加在宽度&高度固定div？ [英] Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?

问题描述

我为这个问题制作了图片，应该更容易理解。

我已经在这里试过一些jquery插件，但不能找到一个我在找。任何建议？

b 使用以下标记进行测试：

 < 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。南蟾蜍。前庭，前庭，前庭。 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演示 。

I made an image for this question, should be easier to understand.

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>

And CSS:

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

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)*$/, '...');
    });
}

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.

UPDATE: Added a jsFiddle Demo.

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