jquery сравнивает высоту ниже img с высотой h2 - PullRequest
Новая
       36

jquery сравнивает высоту ниже img с высотой h2

1 голос
/ 01 февраля 2012

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

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).

Редактировать:

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

Ответы [ 3 ]

1 голос
/ 01 февраля 2012

Примерно так будет работать нормально: 

$('.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 и, возможно, не лучшее решение для всех случаев использования.

0 голосов
/ 01 февраля 2012

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

Во-вторых, вам не нужно использовать другой селектор на вашей переменной h2 в состоянии 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 link

0 голосов
/ 01 февраля 2012

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

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

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

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