使用JavaScript获取字符串长度（像素）

Question

我想知道字符串“Hello World”的像素长度。

它不应该是容器的长度。

有什么帮助吗？

- Kundan Atre

---

"它不应该是我的容器长度。"选择正确的容器（例如，没有填充的span），就没有区别了。 - T.J. Crowder

Answer 1

将文本放入 <span> 中，使用 JavaScript 来测量 <span> 的宽度。

HTML：

<span id="text">Dummy text</span>

JavaScript：

var textWidth = document.getElementById("text").clientWidth;

jQuery:

$('#text').width();

- Mike

---

如果 span 元素设置了 CSS 样式将其宽度设置为 100%，那么这种方法就行不通了！ - Andry

你说得对，@Andry。除了span是内联元素这一事实。这意味着你不能定义它的宽度而不改变其显示方式，例如block或inline-block。 - Mike

另外，这里还有一个很好的答案：https://dev59.com/LFXTa4cB1Zd3GeqP01o1#32558114。 - Elnur Shabanov

Answer 2

你可以创建一些内联元素（例如span），将字符串设置为元素的内容（innerHTML），将其插入到文档中（附加到某个元素）并获取其宽度（clientWidth）。由于它取决于字体风格，因此没有其他方法可以以像素为单位测量字符串的长度。

- Artem Sobolev

Answer 3

由于字符串的像素长度会根据独立应用的 CSS 属性（如字体、粗细和大小）而改变，我认为这在 JS 中不可能实现。

- user2068219