我如何才能得到内容的实际高度，当-webkit线夹:2-webkit长方体方向:垂直;和溢出:应用隐藏

Question

我用了两个"div"来解释我的问题。div.text和text2包含相同的数据，但.text具有以下CSS属性：

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

文本2没有，两者都有相同的数据，所以我想知道.text实际高度，即使应用了CSS以上。第二段仅供参考，我希望解决方案，因为第二段不存在

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>

Answer 1

一旦出现.textclass，div的实际大小就会变小。很明显，如果class不在，你会对大小感兴趣，但为了找出答案，你需要在添加class之前进行测量，请参阅下面的片段：

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>

Answer 2

.box {
display:grid;
grid-template-column:1fr 1fr;
align-items:stretch;
}

这对你有用。