使用JavaScript获取字符串长度（以像素为单位）

Question

假设我有字符串“Hello”。这个字符串显然长度为五个字符，但它在像素上的长度是多少？有没有一种简单的方法在JavaScript中确定这个长度？我想到了一个解决方案，其中需要向用户显示额外的div，但这种方式似乎很麻烦。

从更大的角度来看，我正在试图确定需要多少空格才能填满该字符串的长度。正如您从上面可以看出的那样，我认为最好的选择是简单地测量用户视角下字符串和一个空格字符的长度，并根据此计算应替换文本的空格数量。顺便说一下，这将显示在HTML输入文本中。

谢谢。

- Gus

---

你可能想要一个元素的宽度，以像素为单位，该元素的内容是字符串"Hello"。我说得对吗？ - Pablo Fernandez

我建议使用等宽字体，这样你就可以知道需要多少个空格了。 ;) http://en.wikipedia.org/wiki/Monospaced_font - JoeyRobichaud

@JoeRobich 我相信 Unicode 打破了“一个字符对应一个字形”的假设 :-) - user166390

Answer 1

我认为没有一个好的、简单的方法来做到这一点，除了计算容器的长度。宽度取决于字体大小、字体、字母间距，这将因浏览器不同而有所不同...

- Robin

Answer 2

您可以确定字符串的容器中的像素数。您可以通过在DOM中创建一个隐藏元素，将内部HTML设置为该字符串，然后请求宽度来实现此操作。

- rcravens

---

你如何获取宽度？我尝试了lbl.style.width和lbl.width，但它们总是未定义的值。 - Kingalione

@NetMage 这个答案不需要 jQuery，并且它解释了如何计算字符串的宽度。 - Madbreaks

@Madbreaks 我不知道为什么我写了那个... :) - NetMage

Answer 3

我曾使用以下 jQuery 语法来确定文本长度（以像素为单位）：

var txtLen = $(<selector>).text().length * $(<selector>).css('font-size').slice(0,-2);

其中selector是您用于定位特定元素的内容。根据需要进行调整（如果字体大小未以px为单位设置）。

例如：

var txtLen = $('table td').text().length * $('table td').css('font-size').slice(0,-2);

这个在实际编程中的用途是当我需要确定是否在具有固定宽度的 td 上显示工具提示时 - 如果 td 比其内容更宽，就没有必要显示工具提示。

Robin's answer 中提到的事情仍然适用。

- FiddlingAway