Determining the Height of an Element in Django Templates

Question

I'm using a div with a fixed width, and within that div I have a p with the following CSS:

height:100px;
overflow:hidden;

I want my templates to display a MORE button when there is text that overflows the paragraph element and is therefore hidden. I can get a decent estimate that works 90% of the time based on how many words are in a box of a paragraph with height 100px. However, this doesn't account for things like blocks of text with a lot of short lines and line breaks. Not to mention users changing their browser's default font size. I'm less worried about the latter, but I'd really like to be able to accurately determine whether or not an element has overflow within a django template.

Answer 1

As an alternative you can use css overflow-y property which will show a vertical scroll bar if content exceed defined height of a container e.g. div

overflow-y: scroll

Answer 2

This sounds like it requires a javascript solution. Something like this to check whether there's overflow, then you could show a hidden MORE button if so.

See it in action in this jsfiddle

html:

<p class="maybe_more">A lot of text...am I overflowing?</p>
<input class="show_more" type="submit" value="MORE">

css:

.maybe_more {
  height: 100px;
  overflow: hidden;
}
.show_more {
  display: hidden;
}

jQuery javascript:

$(document).ready(function() {
  $(".maybe_more").each(function(){
    if ($(this)[0].scrollHeight > $(this)[0].clientHeight) {
      $(this).next(".show_more").toggle(true);
    }
  });
});