I have used two 'div's 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. Second paragraph is just for reference I expect solution as the second paragraph is not there....
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>Once the .text class is present, the real size of the div becomes smaller. It is clear that you are interested in what would the size be if the class was not there, but in order to find that out, you need to do the measurement before you add the class, see the snippet below:
let div1 = document.querySelector("#div1");
document.getElementById('text').innerHTML = "Height of below div is: " + div1.offsetHeight;
div1.classList.add('text').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 id="div1">
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>.box {
display:grid;
grid-template-column:1fr 1fr;
align-items:stretch;
}
This Will Work for you.