I will give an example below, so as not to make unnecessary discussions ...

Option One ...

var textTwo = document.getElementById('text_two'); var textTwoChildren = textTwo.children; var parHeight = 0; for (var i = 0; i < textTwoChildren.length; i++) { parHeight += textTwoChildren[i].getBoundingClientRect().height; } console.log('parHeight -- ', parHeight) 
 #text_two { overflow: hidden; position: absolute; top: 0; left: 0; width: 300px; height: 100px } p { background: orange; } 
 <div id="text_two"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita alias, obcaecati voluptatum. Dolorum illo id dolore optio fugiat autem a!QQQQ</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusantium eligendi magnam voluptatum officiis explicabo iste quod, eos possQQQQimus quo.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, aliquam vero incidunt? Architecto aspernatur obcaecati esse commodi QQQQatque. Quidem, maxime.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor accusamus facere, animi, maiores numquam magni eveniet quam. DelectusQQQQ, dolor, optio!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque reprehenderit commodi deserunt sapiente magni perferendis explicabo maiores QQQQofficiis doloribus repellat.</p> </div>

And as we can see from this first example, the content of the text_two block are elements, we can find out their height ...

But in the second example, we just have the content of the text

 var textTwo = document.getElementById('text_two'); var textTwoChildren = textTwo.children; var parHeight = 0; for (var i = 0; i < textTwoChildren.length; i++) { parHeight += textTwoChildren[i].getBoundingClientRect().height; } console.log('parHeight -- ', parHeight) 
 #text_two { overflow: hidden; position: absolute; top: 0; left: 0; width: 300px; height: 100px } 
 <div id="text_two"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia eaque odit autem sint aspernatur doloribus natus recusandae. Sequi praesentium officiis at fuga doloremque error aperiam vero accusamus optio assumenda quaerat similique perferendis vel, rerum quasi beatae officia ad nemo sint suscipit dolorum, sunt rem. Quidem eos illo et laborum quasi nihil </div>

And what if, by the content of the text_two block of plain text, we can find out the height of the text (content)?

PS I'm aware that I can put this text in the p tag and determine the height of the paragraph

    1 answer 1

    You can check scrollHeight

     const textTwoElement = document.querySelector('#text_two'); console.log(textTwoElement.scrollHeight) 
     #text_two { overflow: hidden; position: absolute; top: 0; left: 0; width: 300px; height: 100px } 
     <div id="text_two"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia eaque odit autem sint aspernatur doloribus natus recusandae. Sequi praesentium officiis at fuga doloremque error aperiam vero accusamus optio assumenda quaerat similique perferendis vel, rerum quasi beatae officia ad nemo sint suscipit dolorum, sunt rem. Quidem eos illo et laborum quasi nihil </div>

    • Thanks ...... - Air