我需要测量容器中单个单词(字符串)的像素长度。我正在缩小每个div的宽度,以便当文本换行时,它与容器完全齐平,因为存在导致换行的最大宽度。这个解决方案(及其用例)之前在Jquery中已经回答过了:
是否将DIV缩小到已换行到其最大宽度的文本?
然而,上面的解决方案将每个单词放在一个span中,并使用Jquery的.width()方法来计算其物理大小。
虽然我已经成功地使用offsetWidth方法找到了渲染到DOM的项的宽度,但我还没有找到其他可行的解决方案,这些解决方案不涉及将项渲染到我可以用来找到单个世界宽度的dom。
我在网上找到的一些解决方案提供了考虑字体的方法,但是字体可能会改变,所以我需要一个更像Jquery的.width()的方法。
React/JavaScript(不是Jquery)是否有任何方法可以确定单词的物理长度(以像素为单位),而不必将项目呈现到dom,也不必将字体类型放入函数中?
2条答案
按热度按时间fkvaft9z1#
你可以像下面这样使用
measureText
画布:如果需要更改字体,只需传递它即可,它基本上是一个CSS字体声明。
第一个
cngwdvgl2#
请尝试以下解决方案。
您需要传递第一个参数作为要检查其宽度的text/HTML,如果要将任何样式附加到外层,则需要传递第二个参数。