python - 确定 Django 模板中元素的高度

Question

我正在使用div具有固定宽度的 a，并且在其中div我有一个p带有以下 CSS 的：

height:100px;
overflow:hidden;

MORE当有文本溢出段落元素并因此被隐藏时，我希望我的模板显示一个按钮。根据高度为 100 像素的段落的框中有多少单词，我可以得到一个体面的估计，该估计在 90% 的时间内有效。但是，这并没有考虑到诸如带有很多短行和换行符的文本块之类的情况。更不用说用户更改浏览器的默认字体大小了。我不太担心后者，但我真的很想能够准确地确定一个元素是否在 django 模板中溢出。

Answer 1

这听起来需要一个 javascript 解决方案。像这样检查是否有溢出，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);
    }
  });
});

Answer 2

作为替代方案，您可以使用 css overflow-y属性，如果内容超过容器的定义高度，例如 div，它将显示垂直滚动条

overflow-y: scroll