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

问题描述

参考这个例子

http://jsfiddle.net/uzgJX/

结果是包含文本的框的高度（如果用鼠标选择文本，则可以看到该文本。）wichi高于文本的实际高度。< br>
有没有办法用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

推荐答案

获取计算出的字体大小代替你的文本元素：

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

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

font-size 表示的大小em square for a font。应该注意的是，虽然大多数字形将保持在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屋！