跨度和 iframe 正文中的像素宽度答案

【问题标题】：Width in pixel of   in span and iframe body跨度和 iframe 正文中的像素宽度
【发布时间】：2012-12-12 11:45:09
【问题描述】：

我需要知道&nbsp; 的宽度（以像素为单位），以及它是否取决于字体大小。此外，这是否因页面中的不同元素而异？

另外，&nbsp; 与普通的有什么不同？

【问题讨论】：

标签： html css

【解决方案1】：

&nbsp;（不间断空格）覆盖普通空格的目的是防止单词之间出现换行符。您可以使用多个&nbsp; 实体将多个空格放在一起。如果您只添加一个空格而不使用&nbsp; 实体，它们将被缩减为一个空格。

如果您使用多个&nbsp;s 来填充内容，就像一些初学者HTML 用户所做的那样，那么这被认为是不正确的。您应该始终使用 CSS 边距和填充来填充内容，以保持语义正确性，并将样式与页面内容分开。

&nbsp; 的宽度取决于字体大小、字母间距等。与任何其他字符一样，并且如上所述，这可以由用户更改，因此没有可靠的知道方式。

【讨论】：

是的，但 nbsp（不间断空格）的实际意义在于它不会让行被拆分（例如，“20 000”会确保数字之间没有换行符）。防止空格崩溃只是一个副作用。
可以安全地假设它会小于等于字体大小吗？？？如果它们的字体系列和大小相同，页面上的所有元素是否也赋予相同的宽度？？？？
实际上我在 iframe 主体和跨度内发布相同的内容，并且 iframe 的宽度是使用跨度的 scrollWidth 确定的。在我从键盘添加空格之前，一切正常。
您可以假设它是 &nbsps 在不同元素中的大小应该相同......但诀窍是确保所有这些东西都是相同的.如果 iframe 在跨度内，您可以尝试使用百分比设置 iframe 的宽度，该百分比与跨度相关。

【解决方案2】：

虽然 Maccath 的回答是正确的建议，但要直接回答您的问题：是的，您实际上可以使用一些 javascript get the width quite simply：

例如，给定：

<span id="nbsp">&nbsp;</span>

宽度可以用jQuery获取：

$('#nbsp').width()

jQuery 在渲染时返回<span> 的宽度，因此它考虑了字体大小等。既然你知道怎么做，就不要这样做了。

【讨论】：

我在您的示例中看不到任何问题。请注意，&nbsp; 不会拉伸，只是它前面的空格会拉伸。请参阅此示例：jsfiddle.net/sveinatle/HNxnY/5 我在所有跨度周围放置了一个边框，以可视化每个&nbsp; 的实际大小，它们看起来与报告的值一致。最后一个跨度仅包含一个普通空间（并且没有周围的空间以避免折叠），因此被拉伸，这也反映在最后报告的值中。
在我的桌面上，这三个值是不同的（普通空间为 51,99 和 78）。我几乎看不出这怎么能被认为是可靠的。我的观点是，没有可靠的方法来判断网页中空间的大小。理由是一种证明方式，但我几乎可以肯定它们是其他方式（例如字距调整）。
我现在在 Chrome 中查看了它，当使用 justify 时，它对 nbsp 的缩放与 Opera 不同，实际上，我得到了不同的值。但与空间的渲染方式（如边框所示）相比，它们似乎仍然是正确的。所以我仍然没有看到任何不正确的地方。字距调整是否会影响值还有待观察，但即使确实如此，那么正确性或可靠性取决于您在存在字距调整的情况下对字符宽度的定义......