確定Django模板元素的高度

我使用的是div有一個固定的寬度，而div內我有以下CSS一個p：確定Django模板元素的高度

height:100px; 
overflow:hidden;

我希望我的模板顯示MORE按鈕，當文本溢出了段落元素並因此被隱藏。根據一個高度爲100px的段落的框中有多少個單詞，我可以得到一個合理的估計值，這個估計值可以工作90％。但是，這並沒有解決諸如短文和換行符等文本塊的問題。更不用說用戶改變瀏覽器的默認字體大小了。我不太擔心後者，但我真的很想能夠準確地確定一個元素是否在django模板中溢出。

來源

2013-05-11 user1427661

作爲一種替代方法，您可以使用css overflow-y屬性，如果內容超出了容器的定義高度，將顯示垂直滾動條。 div

overflow-y: scroll

來源

2013-05-11 15:52:45

這聽起來像是需要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); 
    } 
    }); 
});

來源

2015-04-25 06:13:38

確定Django模板元素的高度

回答

相關問題