Определение высоты элемента в Django шаблонах

Question

Я использую div с фиксированной шириной, и в этом div у меня есть p со следующим CSS:

height:100px; 
overflow:hidden; 

Я хочу, чтобы мои шаблоны для отображения экрана MORE кнопка, когда есть текст, который переполняет элемент абзаца и поэтому скрыт. Я могу получить приличную оценку, которая работает 90% времени, исходя из того, сколько слов находится в поле абзаца с высотой 100 пикселей. Однако это не учитывает такие вещи, как блоки текста с большим количеством коротких строк и разрывов строк. Не говоря уже о том, что пользователи меняют размер шрифта по умолчанию в браузере. Я меньше беспокоюсь о последнем, но мне очень хотелось бы точно определить, переполняется ли элемент внутри шаблона django.

Answer 1

В качестве альтернативы вы можете использовать свойство css overflow-y, которое отображает вертикальную полосу прокрутки, если содержимое превышает определенную высоту контейнера, например. div

overflow-y: scroll 

Answer 2

Похоже, что для этого требуется решение для javascript. Что-то вроде this, чтобы проверить, есть ли переполнение, тогда вы можете показать скрытую кнопку MORE, если это так.

в действии в этом 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); 
    } 
    }); 
});