title: jquery compare the height beneath img to h2's height
body: <p>I am trying to adapt this:</p>
  
  <pre><code>var h2=$('.block h2');
  var divh=$('.block').height();
  while ($(h2).outerHeight()&gt;divh) {
      alert('enters while');
      $(h2).text(function (index, text) {
          return text.replace(/\W*\s(\S)*$/, '...');
      });
  }
  </code></pre>
  
  <p>as explained here: <a href="https://stackoverflow.com/questions/3404508/cross-browsers-mult-lines-text-overflow-with-ellipsis-appended-within-a-widthhe">Cross browsers mult-lines text overflow with ellipsis appended within a width&amp;height fixed div?</a></p>
  
  <p>The problem I have encountered in my case is that I have various <code>li</code> where each one contains a <code>.block</code> which has a <code>h2</code> tag per <code>li</code></p>
  
  <p>Example:</p>
  
  <pre><code>&lt;li&gt;
  &lt;div class="block"&gt;
  ....
  &lt;h2&gt;Tittleasfasjgpashgj9ahgpasgnapsighapighapsogna&lt;/h2&gt;
  ...
  &lt;/div&gt;
  &lt;/li&gt;
  
  &lt;li&gt;
  &lt;div class="block"&gt;
  ....
  &lt;h2&gt;5Tittleasfasjgpashgj9ahgpasgnapsighapighapsogna&lt;/h2&gt;
  ...
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/lI82f.jpg" rel="nofollow noreferrer">http://i.stack.imgur.com/lI82f.jpg</a></p>
  
  <p><strike>Having <code>.block</code> set with 200px, inside having <code>img</code> set to <code>height: 90px;</code> and a <code>padding: 5px</code> now I need to take the height left beneath img and compare to <code>h2</code>'s height.</p>
  
  <p>But it doesn't work either, it just doesn't do the if, but <code>divh</code> contains data (200, the 200px set in css).</strike></p>
  
  <p>Edit:</p>
  
  <p>So I just figure out that the best way to fix this is to set a height to <code>h2</code> tag and than compare its content height with the set one.</p>