javascript - 使用 JavaScript 获取以像素为单位的字符串长度

Question

假设我有字符串“Hello”。这个字符串的长度显然是五个字符，但是它的长度是多少像素呢？有没有一种简单的方法可以在 JavaScript 中确定这个长度？我想到了一个解决方案，其中必须向用户显示一个额外的 div，但这种方式看起来既麻烦又复杂。

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

谢谢。

Answer 1

除了计算容器的长度外，我认为它们不是一个好的、简单的方法。宽度取决于字体大小、字体、字母间距，它会因浏览器等而有所不同......

Answer 2

您可以确定字符串容器的像素数。您可以通过在 DOM 中创建一个隐藏元素、将内部 HTML 设置为字符串然后询问宽度来做到这一点。

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具有固定宽度的 a 上显示工具提示 - 如果td比其内容更宽，则无需显示工具提示。

罗宾的回答中所述的事情仍然适用。