He usado dos 'div's para explicar mi pregunta, tanto div .text como text2 contienen los mismos datos, pero .text tiene la propiedad CSS debajo:
.text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: all 0.3s ease-in-out; }que el texto 2 no tiene, ambos tienen los mismos datos, pero quiero saber la altura real del texto, incluso si se aplica el CSS anterior. El segundo párrafo es solo para referencia. Espero una solución ya que el segundo párrafo no está allí....
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>Una vez que la class .text está presente, el tamaño real del div se vuelve más pequeño. Está claro que está interesado en cuál sería el tamaño si la class no estuviera allí, pero para averiguarlo, debe realizar la medición antes de agregar la class , vea el fragmento a continuación:
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; }Esto funcionará para usted.