使用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 上显示工具提示 - 如果 td 比其内容宽，则无需显示工具提示。

Robin's answer 中所述的内容仍然适用。