Question

我正在努力改变这一点：

var h2=$('.block h2');
var divh=$('.block').height();
while ($(h2).outerHeight()>divh) {
    alert('enters while');
    $(h2).text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

如下所述：Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?

我在我的案例中遇到的问题是我有各种li，其中每个.block都包含一个h2，li每个<li> <div class="block"> .... <h2>Tittleasfasjgpashgj9ahgpasgnapsighapighapsogna</h2> ... </div> </li> <li> <div class="block"> .... <h2>5Tittleasfasjgpashgj9ahgpasgnapsighapighapsogna</h2> ...

示例：

.block

http://i.stack.imgur.com/lI82f.jpg

~~让img设置为200px，内部height: 90px;设置为padding: 5px，h2现在我需要在img下面留下高度并进行比较divh的身高。~~

~~但它也不起作用，它只是不执行if，但h2包含数据（200，在css中设置200px）。~~ < / p>

编辑：

所以我只想弄清楚解决此问题的最佳方法是将高度设置为{{1}}标记，然后将其内容高度与设置高度进行比较。

Answer 1

这样的事情可以正常工作：

$('.block').each(function (i, el) {
    var $h2 = $(el).find('h2');
    var divh = $(el).height();
    while ($h2.outerHeight() > divh) {
        $h2.text(function (index, text) {
           return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
});

jsFiddle Demo

你应该使用.block { word-wrap: break-word; }（或在那些长h2文本中添加一些空格）让它们破裂并帮助实现效果。

正如我在original question中所说，这只是一个想法，而不是可以在生产中使用的东西。它非常重要，可能不是所有用例的最佳解决方案。

Answer 2

首先，你的正则表达式仅适用于空格分隔的单词。像你这样的长串不会被缩短。

其次，在while条件下，你不需要在你的h2 var上使用另一个选择器。

第三，绝对需要.each。

var h2=$('.block h2');
h2.each(function(){
    var divh=$(this).closest('.block').height();
    while ($(this).outerHeight()>divh) {
        $(h2).text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
});

jsfiddle link

Answer 3

我想你可能会遇到一些问题，首先你在“我想”你想要做的“同时”线上打字错误

while ($('h2').outerHeight()>divh) {

但我真的认为你想使用.each（）jquery方法，比如

$('h2').each(function(i) {
  if ($(this).outerHeight() > divh) {
    //...
  }
});

jquery将img下的高度与h2的高度进行比较

3 个答案: