如何使用javascript查找每个字符的宽度（以像素为单位）

考虑

<div>manmadhan</div>

manmadhan

我需要知道是否有任何可能的方法根据字体找到每个字符的像素宽度，因为我使用的是react应用程序，我只需要javascript

输出应类似于m=12px，n=24像素 诸如此类 我试着分开文本并尝试使用get边界，但是空格有一些问题，有什么建议吗

我已经尝试了以下方法，但它给了我整个字符串的宽度，而不是字符串中单个字符的宽度

---

要做到这一点，唯一的方法是渲染字母，测量它，然后再次删除它

当你打开页面时，你可以这样做来获取所有的字母，不过最好只在你需要的时候获取字母的长度，甚至不获取字母的长度

让letterLength={}；
让字母=[“a”，“b”，“c”，“d”，“e”，“f”，“g”，“h”，“i”，“j”，“k”，“l”，“m”，“n”，“o”，“p”，“q”，“r”，“s”，“t”，“u”，“v”，“w”，“w”，“x”，“x”，“y”，“a”，“b”，“c”，“d”，“e”，“f”，“g”，“h”，“i”，“j”，“k”，“l”，“m”，“n”，“o”，“p”，“r”，“s”，“t”，“u”，“w”，“x”，“y”，“z”，“0”，“1”，“2”，“3”，“4”，“5”，“7”，“8”，“9”]]；
对于（让字母中的字母）{
设span=document.createElement（'span'）；
span.append（document.createTextNode（letter））；
span.style.display=“内联块”；
document.body.append（span）；
字母长度[字母]=span.offsetWidth+“px”；
span.remove（）；
}
让word=“manmadhan”；
for（设i=0；iconsole.log（letterLength）

执行此操作的唯一方法是渲染字母，测量它，然后再次删除它

当你打开页面时，你可以这样做来获取所有的字母，不过最好只在你需要的时候获取字母的长度，甚至不获取字母的长度

让letterLength={}；
让字母=[“a”，“b”，“c”，“d”，“e”，“f”，“g”，“h”，“i”，“j”，“k”，“l”，“m”，“n”，“o”，“p”，“q”，“r”，“s”，“t”，“u”，“v”，“w”，“w”，“x”，“x”，“y”，“a”，“b”，“c”，“d”，“e”，“f”，“g”，“h”，“i”，“j”，“k”，“l”，“m”，“n”，“o”，“p”，“r”，“s”，“t”，“u”，“w”，“x”，“y”，“z”，“0”，“1”，“2”，“3”，“4”，“5”，“7”，“8”，“9”]]；
对于（让字母中的字母）{
设span=document.createElement（'span'）；
span.append（document.createTextNode（letter））；
span.style.display=“内联块”；
document.body.append（span）；
字母长度[字母]=span.offsetWidth+“px”；
span.remove（）；
}
让word=“manmadhan”；
for（设i=0；iconsole.log（letterLength）

不，这没有回答我的问题，我需要单独字符串的宽度，而不是整个divuse边距填充0，设置left-99999，并通过在div中放入一个字符来计算宽度。您将得到它。@Liam这只适用于单空格fonts@Liam因为这将导致平均长度，而不是个体的长度characters@Liam它不是那样工作的，字符

A

有不同的宽度，字符

I

有不同的宽度不，这不能回答我的问题，我需要分隔字符串的宽度，而不是整个divuse边距填充0，设置left-99999，并通过在div中放入一个字符来计算宽度。您会得到它。@Liam，这只适用于单空格fonts@Liam因为这将导致平均长度，而不是个体的长度characters@Liam它不是那样工作的，字符

A

具有不同的宽度，字符

I

具有不同的宽度。这不会告诉您字符在字符串中的位置大小，在

AV

和

VV

中，

V

在字符串中占据不同的空间量，因为。它将给出角色大小的估计值，但是如果你想要一个估计值，为什么不使用平均值呢？！我想这是最糟糕的情况。我会在回答中添加一条注释，表达这个TBH，我很确定这是一个，我会想象OP是想工作休息还是什么的。无论如何，这是一个很好的解决方案，没有什么真正起作用。这不会告诉你字符在字符串中位置的大小，在

AV

和

VV

中，

V

在字符串中占据不同的空间量，因为。它将给出角色大小的估计值，但是如果你想要一个估计值，为什么不使用平均值呢？！我想这是最糟糕的情况。我会在回答中添加一条注释，表达这个TBH，我很确定这是一个，我会想象OP是想工作休息还是什么的。不管怎么说，这是一个很好的解决方案，没有什么能真正起作用