如何计算包括左右轴承在内的文本总宽度

Question

我试图计算HTML中跨度的总宽度,包括第一个和最后一个字符的左右方位.我已经尝试过Javascript的offsetWidth和jQuery的width&outerWidth函数,但它们都没有返回我正在寻找的正确值.这是我的意思的一个例子.在Firefox中运行时,计算出的宽度为135px,而使用Web Developer插件进行测量时,实际宽度为141px.

编辑

这是我尝试过的,这里是它给我的值:offsetWidth = 135 jQuery.width()= 135 jQuery.outerWidth()= 135

他们都没有计算'f'上的6px悬空(这将使宽度为141).

Answer 1

遗憾的是，不存在直接的解决方案，因为它超出了盒模型的范围——浏览器本身在渲染布局时无法识别字母“f”的突出部分。<span>如果将a 包裹起来，您可以亲自看到这<div>一点width: 135px，并且overflow: auto-- 不会出现滚动条，悬垂部分被简单地切断。这也是为什么 firebug 会报告没有悬垂的宽度。

正如@Aaron 指出的，等宽字体不存在这个问题，因为这些字体中没有字母超出字符的固定宽度框。

找到真实宽度的唯一方法是通过基于像素（而不是基于布局）的方法。我可以想到一种方法：使用相同的字体在<canvas>元素上绘制相同的文本，并以这种方式测量像素宽度。