获取固定高度 div 中文本的高度答案

【问题标题】：getting the height of the text in a fixed height div获取固定高度 div 中文本的高度
【发布时间】：2022-01-03 11:33:48
【问题描述】：

假设我有这个代码：

<div style="width: 100px; height: 100px; background: yellow; font-size: 150px">
 X
</div>

字体大小为 150px 时，div 内的文本会比 div 本身大也就不足为奇了。至少在 Google Chrome 中是这样。

我的问题是......我该如何计算固定大小 div 中文本的高度/宽度？

使用 jQquery，$(...).height() 返回 100，$(...).innerHeight() 和 $(...).outerHeight() 也是如此。

我的意思是，使用这个例子，它非常简单。高度大概是150px。但是当你做这样的事情时它会变得更加复杂：

<div style="width: 100px; height: 100px; background: yellow; font-size: 30px">
 hello, world! hello, world! hello, world!
</div>

有什么想法吗？

https://jsfiddle.net/p0xLv1qj/

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

好吧，你可以创建一个只包含文本的新元素，将它短时间添加到你的 body 中，然后获取高度。

这就是我想出的——它返回 204，字体大小为 30：

var newEl = document.createElement("p");
newEl.innerHTML = document.getElementById("myDiv").innerHTML;
newEl.style.fontSize = document.getElementById("myDiv").style.fontSize;
newEl.style.width = document.getElementById("myDiv").style.width;
document.body.appendChild(newEl);
alert(newEl.clientHeight);
newEl.remove();

【讨论】：

如果你已经尝试过我以前的代码但它不起作用，试试这个。我忘记了一些小细节。

【解决方案2】：

希望这个技巧对你有用。

<div style="width: 100px; height: auto; min-height:100px; background: yellow; font-size: 30px">
 hello, world! hello, world! hello, world!
</div>
<br/>
<div style="width: 100px; height: auto; min-height:100px; background: yellow; font-size: 30px">
 hello, world! test
</div>
<br/>
<div style="width: 100px; height: auto; min-height:100px; background: yellow; font-size: 30px">
 hello, world! testing data
</div>

【讨论】：

这不是他想要的。