8

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

编辑

这是我尝试过的，这是它给我的值： offsetWidth = 135 jQuery.width() = 135 jQuery.outerWidth() = 135

他们都没有计算 'f' 上的 6px 悬垂（这将使宽度为 141）。

4

3 回答 3

2

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

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

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

于 2010-12-15T02:52:43.650 回答
1

实际上，我认为问题在于字体本身。我将 jsfiddle 更改为 font-family: monospace，它全部包含在灰色框中（因此计算正确）。即使将其保留为原始字体，但将示例更改为“aaa”或“mmmm”效果也很好。只是那个字体中的“f”字形为你吹响了它。

不幸的是，我不知道有什么 DOM 属性可以解释这一点。不确定这是一个很大的答案，但我无权对这个问题发表评论，并认为这些发现可能有助于为您指明正确的方向......

于 2010-12-14T17:27:00.583 回答
0

jQuery的怎么样.width()？

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

和

var w = $('#spanId').width();
于 2010-12-14T16:31:38.780 回答