Как вы можете сказать, когда <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

Предполагая, что ваш div имеет фиксированную высоту, установите overflow:hidden и проверьте свойство div.scrollHeight.

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

Answer 4

Вы не можете сказать, приведет ли любой больше текста к переполнению ... возможно, текст - это просто один крошечный i или даже загрузка пробелов нулевой ширины. Все, что вы можете сделать, это добавить текст и посмотреть, переполнится ли он впоследствии.

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

Answer 5

Вы должны быть в состоянии стать очень близко, посчитав символы в div. Возможно, вам придется сделать это onkeyUp, если вы печатаете, или прослушать какое-то другое событие, если оно не заполняется при наборе.