Можно ли определить высоту контента элемента, если контент просто текст?

#javascript #dom

                    
Приведу пример ниже, что бы не разводить лишних дискуссий...

Вариант первый...



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;
}

  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita alias, obcaecati
voluptatum. Dolorum illo id dolore optio fugiat autem a!QQQQ
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusantium eligendi
magnam voluptatum officiis explicabo iste quod, eos possQQQQimus quo.
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, aliquam
vero incidunt? Architecto aspernatur obcaecati esse commodi QQQQatque. Quidem, maxime.
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor accusamus facere,
animi, maiores numquam magni eveniet quam. DelectusQQQQ, dolor, optio!
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque reprehenderit
commodi deserunt sapiente magni perferendis explicabo maiores QQQQofficiis doloribus
repellat.





И как мы видим из этого первого примера, контентом блока text_two являются элементы,
мы можем узнать их высоту...



А вот во втором примере у нас просто контентом является текст



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
}

  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





А что если, контентом блока text_two обычный текст, мы можем узнать высоту текста
(контента)?


  P.S. Я в курсе, что могу этот текст сунуть в тег p и определить высоту параграфа

    

Ответы

Ответ 1

Можно проверять 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
}

  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