Question

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

height:100px;
overflow:hidden;

当文本溢出段落元素并因此被隐藏时，我希望我的模板显示MORE按钮。根据高度为100px的段落框中有多少单词，我可以得到一个合适的估计，它可以在90％的时间内工作。但是，这并不能说明像带有大量短线和换行符的文本块。更不用说用户更改浏览器的默认字体大小了。我不太担心后者，但我真的希望能够准确地确定一个元素是否在django模板中溢出。

Answer 1

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

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);
    }
  });
});

确定Django模板中元素的高度

2 个答案: