How to determine whether some content is partially hidden because of max-height?

Question

I'm trying to determine whether some content fits within its max-height limit but the line-height affects the result, in a way that I don't understand.

Here is my code to compute whether or not the content is partially hidden:

  var partiallyHidden = content.scrollHeight > content.offsetHeight;

But it seems like I have to factor in other aspects such as line-height because depending on the line-height of the content, this code does not work.

See this full example here: http://plnkr.co/edit/mdI6pGRRWHtS0KXvQOX6?p=preview

What is the relationship between line-height and scrollHeight/scrollOffset? And are there other aspects I have to consider?

By the way, my solution has to work with IE9+.

---

Other notes:

• I found the content.scrollHeight > content.offsetHeight formula in another SO question.
• The code provided in the accepted answer to this question yields the same error. (el.clientHeight < el.scrollHeight). I'm not sure how clientHeight vs scrollOffset changes the result.

Answer 1

This Smashing Magazine article describes a font's baseline:

"To make matters worse, the CSS line-height property doesn’t have an inherent concept of baseline, and each line of text is placed roughly in the middle of the element’s total height. "

And according to this SO answer:

"Some fonts don't even have the concept of ascenders/descenders. What would you do if an icon font was used? Some fonts align descenders such that they don't even descend below the baseline. Others, such as calligraphic fonts tend to drop below the baseline, whether or not the character has an actual descender."

So, according to this, at line-height: 12px a font-size: 12px font will sit roughly in the middle, but the descender (or any character that may descend below the baseline) may not be factored into the total height of the font, so the font could expand outside the line-height. This appears to be the case here. When I increase your line-height to 13px or higher (which you've demonstrated with 15px), this clears up the issue.

I was also able to fix the low line-height issue by adding two <br/> tags at the end of your controller: Line 25<br/>Line 26<br/><br/>, so it basically adds a blank line with nothing that can be hidden at the bottom.

Height is based on line-height, not font-size: http://jsfiddle.net/4N53p/

I should also add, I tried a couple other fonts, and they had the same issue.

So based on this, you can assume that if(line-height <== font-size), something will be hidden. So you could use something like this (tested in your app by changing line-height and the amount added):

if(line-height === font-size) {
    var mustShowButton = content.scrollHeight > content.offsetHeight + 1;
else if(line-height < font-size) {
    var mustShowButton = content.scrollHeight > content.offsetHeight + (font-size - line-height); 
} else {
    var mustShowButton = content.scrollHeight > content.offsetHeight
}