Рассчитать, сколько строк будет использовано в div?

Question

В нижеприведенном фрагменте есть четыре div с 33 символами. В зависимости от ширины и обертывания слова div может принимать одну, две или три строки. Каков хороший способ рассчитать это заранее?

Причина, по которой я нуждаюсь в этом, заключается в том, что я использую компонент списка реактивов (https://bvaughn.github.io/react-virtualized/#/components/List), который принимает фиксированное значение для высоты элемента списка или функцию для вычисления высоты элемента списка в зависимости от индекса. Используя этот индекс, я могу получить текст, который будет в div, и получить ширину списка с помощью JavaScript. Из этих переменных я могу надеяться вычислить соответствующую высоту.

.p100 { 
 
    width: 100px; 
 
} 
 

 
.p150 { 
 
    width: 200px; 
 
}

<div id="div1" class="p100"> 
 
    Hello Hello Hello Hello Hello 
 
</div> 
 
<hr> 
 
<div id="div2" class="p100"> 
 
    abcd abcd abcd abcd abcd abcd 
 
</div> 
 
<hr> 
 
<div id="div3" class="p150"> 
 
    Hello Hello Hello Hello Hello 
 
</div> 
 
<hr> 
 
<div id="div4" class="p150"> 
 
    abcd abcd abcd abcd abcd abcd 
 
</div>

Answer 1

Причина мне нужно это, потому что я использую компонент List среагировать. .. который принимает фиксированное значение для высоты элемента списка или функцию для вычисления высоты элемента списка в зависимости от индекса.

Hi :) Автор реактивной виртуализации здесь.

Я думаю, вы должны проверить компонент CellMeasurer. Я создал его для использования, как тот, который вы описываете. Просмотрите демо-версию here и документы here.

По существу, CellMeasurer позволит отложить измерение текста до времени исполнения. List мог использовать предполагаемый размер до тех пор, пока строки, которые еще не видны.

Answer 2

Это почти кажется, что вы говорите, вы хотите знать, сколько строк вам осталось до того, как слова перекрываться вы дивы.

Если это так, вы можете изменить ширину на width:auto или установить ее на 100%. Таким образом, он будет расширяться с помощью ваших «линий».

Answer 3

По JQuery вы можете иметь ширину и высоту каждого DIV по:

$('#the-div-id').width(); 
$('#the-div-id').height(); 

и JavaScript:

document.getElementById('the-div-id').clientWidth; 
document.getElementById('the-div-id').clientHeight;