Javascript 如何计算文本的总宽度（包括左右方向角）

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

编辑

这是我尝试过的，这是它给我的价值观： 偏移网络宽度=135 jQuery.width（）=135 jQuery.outerWidth（）=135

---

他们都没有计算“f”上的6px悬垂（宽度为141）。

jQuery的

.width（）

如何

---

实际上，我认为问题在于字体本身。我将JSFIDLE更改为font系列：monospace，它都包含在灰色框中（因此计算正确）。即使将其保留为原始字体，但将示例更改为“aaa”或“mmmm”也非常有效。只是字体中的“f”字形让你大吃一惊

---

不幸的是，我不知道有什么DOM属性可以解释这一点。我不确定这是不是一个很好的答案，但我无法对这个问题发表评论，我认为这些发现可能会帮助你找到正确的方向……

遗憾的是，不存在直接的解决方案，因为它不在长方体模型的范围内——在渲染布局时，浏览器本身无法识别字母“f”的突出部分。如果将

包装在

宽度为135px

的

内，并且

溢出：自动

——没有滚动条出现，只需简单地切断悬垂部分，您就可以看到这一点。这也是firebug报告没有悬垂的宽度的原因

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

---

找到真实宽度的唯一方法是通过基于像素（而不是基于布局）的方法。我可以想出一种方法：用相同的字体在

元素上绘制相同的文本，然后用这种方法测量像素宽度。

为了不让我看起来很愚蠢，OP最初没有列出

.width（）

-什么是

.width（）

返回的？0或错误结果？您是否有任何CSS格式可能会阻止

span

调整其内容的大小？.width（）返回与.outerWidth（）相同的值，这两个值都是错误结果只是在黑暗中拍摄-您是否尝试将

span

更改为

div

否它没有任何作用。我实际上是在计算字母“f”的正确方位。像

这样的内联元素实际上没有一个有意义的“宽度”值，至少在概念上没有。我尝试了多种html元素，包括span和width，但没有一种元素能给出我想要的结果。当返回宽度时，它们都不包括“f”上的悬垂宽度。作为参考-这是我得到的：--结果中的宽度和firebug检查员同意，但宽度不包括最后的整个“f”

<span id="spanId"> ... </span>

var w = $('#spanId').width();