javascript - que - a cuantos metros esta el nivel del mar

jquery compare la altura debajo de img a la altura de h2

Question

Estoy tratando de adaptar esto:

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

como se explica aquí: Cross browsers mult-lines texto desbordado con puntos suspensivos anexados dentro de un div fijo de ancho y alto?

El problema que he encontrado en mi caso es que tengo varios li donde cada uno contiene un .block que tiene una etiqueta h2 por li

Ejemplo:

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

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

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

Tener .block establecido con 200px, dentro teniendo img configurado a la height: 90px; y un padding: 5px ahora necesito tomar la altura que queda debajo de img y compararla con la altura de h2 .

Pero tampoco funciona, simplemente no hace if, pero divh contiene datos (200, el 200px establecido en css).

Editar:

Así que me acabo de dar cuenta de que la mejor manera de arreglar esto es establecer una altura en la etiqueta h2 y comparar su altura de contenido con la del conjunto.

Answer 1

Creo que puedes tener un par de problemas, primero tienes un error tipográfico en la línea "while" donde creo que realmente quieres hacer

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

Pero realmente creo que quieres usar el método .each () jquery, algo así como

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

Answer 2

En primer lugar, tu expresión regular solo funciona para palabras separadas por espacios. Cuerdas largas como las tuyas no serán acortadas.

En segundo lugar, no necesita usar otro selector en su var h2 en la condición de tiempo.

En tercer lugar, el .each es definitivamente obligatorio.

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

enlace jsfiddle

Answer 3

Algo así funcionaría bien:

$(''.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

Deberías usar .block { word-wrap: break-word; } .block { word-wrap: break-word; } (o ponga algunos espacios en esos textos largos de h2) para dejarlos quebrar y ayudar a que suceda el efecto.

Como también dije en la pregunta original , esto es solo una idea, no algo listo para ser usado en producción. Es bastante pesado en DOM y puede no ser la mejor solución para todos los casos de uso.