How can I get the actual height of the content,when -webkit-line-clamp: 2;-webkit-box-orient: vertical; and overflow:hidden is applied

So I have used two div to explain my question both div .text and text2 contains same data but .text has below CSS property:

.text {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   transition: all 0.3s ease-in-out;
}

which text 2 has not,both has same data so but I want to know .text actual height even if above CSS applied.

document.getElementById('text2').innerHTML = "Height of below div is: " + document.querySelector(".text2").offsetHeight;

document.getElementById('text').innerHTML = "Height of below div is: " + document.querySelector(".text").offsetHeight;

.text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: all 0.3s ease-in-out;
}

<div class="box">
  <p id="text"></p>
  <div class="text">
    Et eirmod erat diam ipsum sit diam ut et est at ut tempor consequat nisl duis ut justo sit. Aliquyam adipiscing et esse consetetur dolores et suscipit stet magna invidunt sea et sadipscing ea at magna labore. Molestie dolores justo consetetur consequat.
    Sed sit aliquyam eirmod amet nonummy facilisis diam. Diam lorem dolores stet labore eos duo illum facer qui justo duo stet consetetur diam magna.
  </div>
  <br><br>
  <p id="text2"></p>
  <div class="text2">
    Et eirmod erat diam ipsum sit diam ut et est at ut tempor consequat nisl duis ut justo sit. Aliquyam adipiscing et esse consetetur dolores et suscipit stet magna invidunt sea et sadipscing ea at magna labore. Molestie dolores justo consetetur consequat.
    Sed sit aliquyam eirmod amet nonummy facilisis diam. Diam lorem dolores stet labore eos duo illum facer qui justo duo stet consetetur diam magna.
  </div>
</div>