你怎么知道什么時候 <div> 充滿文字？

Question

想象一個網站上有一個元素，該網站想要運行一些JS，它將用隨機文本填充div，當div滿時，它應該清除並重新開始。 是的，我知道這聽起來很奇怪，但問題是，JS如何知道div何時已滿，並開始溢出？

“完整”是指div中不能再放置可見文本。 我想這就是滾動條變為啟用/可見的點。

Answer 1

您可能要做的是將文本實際放在一個內部div中，該寬度與容器的固定寬度相同，但沒有固定的高度。 然后，讓內部div隨其內容增長，並檢查其高度何時接近父div的固定高度。

Answer 2

您可以將div的實際高度與CSS中為該div定義的高度進行比較，以查看實際高度是否更大-因此是否“溢出”。

if(document.getElementById('div').offsetHeight > 
document.getElementById('div').style.height) {
   //do something
}

Answer 3

你不能告訴如果有更多的文本會導致溢出...也許文本只是一個小小的i ，或零寬度空間，甚至負荷。 您所能做的就是添加文本，然后查看它是否溢出。

var hasoverflowed= div.offsetHeight<div.scrollHeight;
// more or less... modulo borders

Answer 4

假設您的div是固定高度，請設置overflow:hidden並檢查div.scrollHeight屬性。

if(myDiv.scrollHeight > myDiv.offsetHeight) { /* the div is full */ }
else { /* there is room left */ }

Answer 5

通過計算div中的字符，您應該可以非常接近。 如果要鍵入，可能需要執行onkeyUp；如果未通過鍵入來填充其他事件，則可能需要監聽其他事件。