如何计算文本的总宽度（包括左右方位）
我正在尝试计算 HTML 中跨度的总宽度，包括第一个和最后一个字符的左轴承和右轴承。我已经尝试过 Javascript 的 offsetWidth 和 jQuery 的 width & 。 outerWidth 函数，但它们都没有返回我正在寻找的正确值。这是我的意思的示例。在 Firefox 中运行，计算出的宽度为 135 像素，而使用 Web Developer 插件测量时，实际宽度为 141 像素。
编辑
这是我尝试过的，这是它给我的值： 偏移宽度 = 135 jQuery.width() = 135 jQuery.outerWidth() = 135
他们都没有计算“f”上的 6px 悬垂（这将使宽度为 141）。
I am trying to calculate the total width of a span in HTML including both the left and right bearings of the first and last characters. I have already tried Javascript's offsetWidth and jQuery's width & outerWidth functions, but neither of them return the correct value I am seeking. Here is an example of what I mean. Running in Firefox the calculated width is 135px, while measuring with the Web Developer plug-in gives an actual width of 141px.
Edit
Here is what I've tried, and here are the values it gives me:
offsetWidth = 135
jQuery.width() = 135
jQuery.outerWidth() = 135
None of them are calculating the 6px overhang on the 'f' (which would make the width 141).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
遗憾的是，不存在直接的解决方案，因为它超出了盒模型的范围——浏览器本身在渲染布局时无法识别字母“f”的突出部分。如果将
包裹在中，您可以亲自看到这一点，width: 135px和Overflow: auto-- 不出现滚动条，悬垂部分被简单地切断。这也是为什么 firebug 会报告没有悬垂的宽度。正如@Aaron 指出的，等宽字体不存在这个问题，因为这些字体中没有字母超出字符的固定宽度框。
找到真实宽度的唯一方法是通过基于像素（而不是基于布局）的方法。我可以想到一种方法：使用相同的字体将相同的文本绘制到
元素上，并以这种方式测量像素宽度。Sadly, no straightforward solution exists because it is outside the realm of the box model -- the browser itself does not recognise the overhang of the letter 'f' when rendering layout. You can see this for yourself if you wrap the
<span>within a<div>ofwidth: 135px, andoverflow: auto-- No scrollbars appear, the overhang is simply cut off. This is also why firebug reports the width without the overhang.As @Aaron pointed out, the problem doesn't exist with monospaced fonts as no letters extend beyond the character's fixed-width box in those fonts.
The only way to find the real width is through pixel-based (rather than layout-based) methods. I can think of one way: draw the same text, with the same font, onto a
<canvas>element, and measure the pixel width that way.其实我觉得问题出在字体本身。我将 jsfiddle 更改为 font-family: monospace，它全部包含在灰色框中（并且计算正确，结果）。即使将其保留为原始字体，但将示例更改为“aaa”或“mmmm”也效果很好。正是该字体中的“f”字形为您带来了惊喜。
不幸的是，我不知道有什么 DOM 属性可以解释这一点。不确定这是否是一个答案，但我无权对这个问题发表评论，并认为这些发现可能会帮助您指出正确的方向......
Actually, I think the problem is the font itself. I changed the jsfiddle to font-family: monospace, and it was all contained within the grey box (and calculated correctly, as a result). Even leaving it as the original font, but changing the sample to "aaa" or "mmmm" worked great. It's just the "f" glyph in that font that's blowing it for you.
Unfortunately, I don't know of a DOM attribute that accounts for that. Not sure that's much of an answer, but I don't have access to comment on the question and thought these findings might help point you in the right direction...
jQuery 的
.width()怎么样？和
How about jQuery's
.width()?and