您如何测量文本在 Javascript 中占用的空间？答案

【问题标题】：How can you measure the space that a text will take in Javascript?您如何测量文本在 Javascript 中占用的空间？
【发布时间】：2010-10-05 00:39:49
【问题描述】：

在 Javascript 中，我有一个特定的字符串，我想以某种方式测量它在某个元素内将占用多少空间（以像素为单位）。

基本上我所拥有的是一个将浮动在其他所有内容之上的元素（如工具提示），我需要通过 Javascript 手动设置它的宽度，因此它会根据里面的文本进行调整。
我不能让它自然地“自动增长”，就像内联元素会水平增长以包含它的子元素一样。

在 Windows 中有执行此操作的 API。有没有办法在 Javascript 中做同样的事情？
如果没有像样的方法，您认为哪种方法可行？（例如，尝试不同的宽度并检查高度以确保它没有超过某个阈值）。

显然，我可以在我的 JS 中硬编码的“像素值”越少越好。

【问题讨论】：

这看起来很骇人听闻，但我已经在 dom 中添加了一些元素，就像#temp{ position: absolute; top: -1000 } 这样不可见的地方，这样我就可以测量它们并采取相应的行动。期待答案。

标签： javascript css text layout

【解决方案1】：

试试这个

http://blog.mastykarz.nl/measuring-the-length-of-a-string-in-pixels-using-javascript/

【讨论】：

【解决方案2】：

这很容易使用 JavaScript 框架。我在这个例子中使用Prototype。

<span id='text' style='border:1px solid #000000;font-size:14px'>hello this is sample text</span>

<script type="text/javascript">
alert($('text').getWidth())
</script>

【讨论】：

【解决方案3】：

鉴于此 HTML <span>text here</span>，您必须读取 span 的 offsetWidth 属性，该属性仅在元素本身添加到 DOM 时分配，没有使其不可见的样式。从技术上讲，这意味着浏览器必须能够可视地加载 DOM 中的元素，才能构造和分配 offsetWidth 属性。

这样的事情会起作用：

var span = document.createElement("span");
span.appendChild(document.createTextNode("text here"));

span.style = ""; // to make sure the elment doesn't have "display: none" or such
document.body.appendChild(span); // adding it to the DOM

var textWidth = span.offsetWidth;

// be sure to hide or remove the span if you don't need it anymore

【讨论】：

如果您需要隐藏它，您可以取消隐藏、测量，然后重新隐藏。我从来没有遇到过“闪烁”的问题