如何获得文本的真实高度？

Posted 2023-03-06

【中文标题】如何获得文本的真实高度？

【英文标题】：How to get the real height of a text?

【发布时间】：2013-02-16 04:04:31

【问题描述】：

参考这个例子http://jsfiddle.net/uzgJX/

结果是包含文本的框的高度（如果您用鼠标选择文本，您可以看到的高度..）wichi 高于文本的实际高度。 有没有办法使用 jquery 或纯 js 获得真实高度？ 在我尝试过的示例中

text.height()

和

text[0].getBoundingClientRect().height  

没有运气，它说的是 19 像素而不是 14 像素

【问题讨论】：

看看这个：***.com/questions/1134586/…

sorry fgokalp: 在输入和编辑问题时出现了一些错误，请参考 Andy E 下面的答案和小提琴示例

坦克矢量，我要读你的链接，但安迪的答案似乎更简单

【参考方案1】：

获取为您的文本元素计算的font-size：

parseInt(window.getComputedStyle(text[0]).fontSize, 10);

font-size 表示字体的 em 正方形的大小。应该注意的是，虽然大多数字形会保持在 em 方格的范围内，但有些 可能 会超出这些范围。不过，这通常不会发生在垂直维度上。

试一试：http://jsfiddle.net/uzgJX/1/。提示：截图并复制到您喜欢的图像编辑器中，然后选择与文本高度完全一致的像素并与小提琴中给出的值进行比较。

【讨论】：

谢谢安迪 E！这就是我需要的！

@ettolo：在文本不可见的情况下，您可能需要先检查 jQuery 的结果，height 是否大于 0。

@ettolo：不，我看到的只是 3 个空的圆角矩形。 （Ubuntu 上的 Chrome 27 和 Firefox 19）

@ettolo：奇怪......当字体大小被继承时它似乎不起作用（尽管它应该）。如果我通过 CSS 直接在元素上设置字体大小，它可以工作：jsfiddle.net/ynfAP/4。它一定是 SVG 的东西，因为 Firefox 和 Chrome 都表现出相同的行为。

谢谢！我试试看