title: How to determine whether some content is partially hidden because of max-height?
body: <p>I'm trying to determine whether some content fits within its max-height limit but the <code>line-height</code> affects the result, in a way that I don't understand.</p>
  
  <p>Here is my code to compute whether or not the content is partially hidden:</p>
  
  <pre><code>  var partiallyHidden = content.scrollHeight &gt; content.offsetHeight;
  </code></pre>
  
  <p>But it seems like I have to factor in other aspects such as <code>line-height</code> because depending on the line-height of the content, this code does not work.</p>
  
  <p>See this full example here: <a href="http://plnkr.co/edit/mdI6pGRRWHtS0KXvQOX6?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/mdI6pGRRWHtS0KXvQOX6?p=preview</a></p>
  
  <p>What is the relationship between line-height and scrollHeight/scrollOffset? And are there other aspects I have to consider?</p>
  
  <p>By the way, my solution has to work with IE9+.</p>
  
  <hr>
  
  <p>Other notes:</p>
  
  <ul>
  <li>I found the <code>content.scrollHeight &gt; content.offsetHeight</code> <em>formula</em> in another SO question.</li>
  <li>The code provided in the accepted answer to <a href="https://stackoverflow.com/questions/143815/how-to-determine-using-javascript-if-html-element-has-overflowing-content?rq=1">this question</a> yields the same <em>error</em>. (<code>el.clientHeight &lt; el.scrollHeight</code>). I'm not sure how <code>clientHeight</code> vs <code>scrollOffset</code> changes the result.</li>
  </ul>