我正在尝试计算 HTML 中跨度的总宽度，包括第一个字符和最后一个字符的左右方位。我已经尝试过 Javascript 的 offsetWidth 和 jQuery 的 width & outerWidth 函数，但它们都没有返回我正在寻找的正确值。这是一个 example我的意思。在 Firefox 中运行计算出的宽度为 135px，而使用 Web Developer 插件测量得出的实际宽度为 141px。
编辑
这是我尝试过的，这是它给我的值(value): 偏移宽度 = 135 jQuery.width() = 135 jQuery.outerWidth() = 135
他们都没有计算“f”上的 6px 悬垂(这将使宽度为 141)。
最佳答案
遗憾的是，不存在直接的解决方案，因为它超出了盒子模型的范围——浏览器本身在呈现布局时无法识别字母“f”的突出部分。如果包装 <span>，您可以自己看到这一点在 <div> 内的 width: 135px , 和 overflow: auto -- 没有滚动条出现，悬垂被简单地切断。这也是 firebug 报告没有悬垂的宽度的原因。
正如@Aaron 指出的那样，等宽字体不存在这个问题，因为在这些字体中没有字母超出字符的固定宽度框。
找到真实宽度的唯一方法是通过基于像素(而不是基于布局)的方法。我可以想到一种方法:将相同的文本、相同的字体绘制到 <canvas> 上。元素，并以此方式测量像素宽度。
关于javascript - 如何计算文本的总宽度，包括左右轴承，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4441483/