如何获取文本的真实高度? [英] How to get the real height of a text?

问题描述

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

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

The result is the height of the box containing the text (the one you can see if you select the text with the mouse..) wichi is higher then the real height of the text.
Is there a way to get the real height with jquery or plain js?
In the example I tryed with

text.height()

和

text[0].getBoundingClientRect().height  

运气不好，它说的是 19px 而不是 14px

with no luck, it says 19px instead of 14px

推荐答案

改为获取文本元素的计算font-size:

Get the computed font-size for your text element instead:

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

font-size 表示字体的 em 正方形的大小.应该注意的是，虽然大多数字形会停留在 em 方块的边界内，但有些可能会超出这些边界.不过，这通常不会发生在垂直维度上.

font-size represents the size of an em square for a font. It should be noted that, while most glyphs will stay inside the bounds of an em square, some may exceed those bounds. This doesn't usually occur on the vertical dimentions, though.

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

Give it a try: http://jsfiddle.net/uzgJX/1/. Tip: screenshot and copy into your favourite image editor, then select the pixels exactly to the height of the text and compare with the value given in the fiddle.

这篇关于如何获取文本的真实高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！