Jquery сравнить высоту под img до h2 height

Я пытаюсь адаптировать это:

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

как описано здесь: Кросс-браузеры с многострочным переполнением текста с эллипсисом, добавленным в ширину и постоянную высоту div?

Проблема, с которой я столкнулся в моем случае, состоит в том, что у меня есть различные li, где каждый содержит .block, который имеет тег h2 за li

Пример:

<li>
<div class="block">
....
<h2>Tittleasfasjgpashgj9ahgpasgnapsighapighapsogna</h2>
...
</div>
</li>

<li>
<div class="block">
....
<h2>5Tittleasfasjgpashgj9ahgpasgnapsighapighapsogna</h2>
...

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

Имея .block с 200px, внутри img установлено значение height: 90px; и padding: 5px, теперь мне нужно взять высоту слева под img и сравнить с высотой h2.

Но он тоже не работает, он просто не делает if, но divh содержит данные (200, 200px установлен в css).

Edit:

Итак, я просто выясню, что лучший способ исправить это - установить высоту тега h2 и сравнить его высоту содержимого с установленной.

Ответы

Ответ 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), чтобы они могли сломаться и помочь эффекту.

Как я уже говорил в оригинальном вопросе, это всего лишь идея, а не готовая к использованию в производстве. Он довольно DOM-тяжелый и может быть не лучшим решением для всех случаев использования.

Ответ 2

Прежде всего, вы regex работает только для разделенных пробелами слов. Длинные строки, подобные вам, не будут сокращены.

Во-вторых, вам не нужно использовать другой селектор на вашем h2 var в состоянии while.

В-третьих, обязательно требуется .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

Ответ 3

Я думаю, что у вас может быть несколько проблем, сначала у вас есть опечатка на строке "while", где я думаю, что вы действительно хотите сделать

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

Но на самом деле я думаю, что вы хотите использовать метод .each() jquery, что-то вроде

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