我需要测量容器中单个单词（字符串）的像素长度。我正在缩小每个 div 的宽度，因此当文本换行时，它与容器完全齐平，因为有一个最大宽度导致它换行。此解决方案（及其用例）先前已在 Jquery 中对此答案进行了回答：
但是，上面的解决方案将每个单词放在一个跨度中，并使用 Jquery 的 .width() 方法来计算其物理大小。当我使用 React 时，我没有这个选项。
虽然我已经成功地使用 offsetWidth 方法来查找已呈现到 DOM 的项目的宽度，但我还没有找到其他可行的解决方案，这些解决方案不涉及将项目呈现到我可以用来查找宽度的 dom来自一个世界。
我在网上找到的一些解决方案提供了考虑字体因素的方法，但字体可能会改变，所以我需要一种更像 Jquery 的 .width() 的方法。
React/JavaScript（不是 Jquery）是否有任何方法可以确定单词的物理长度（以像素为单位），而无需将项目呈现到 dom 并且无需将字体类型放入函数中？
您可以使用measureText如下所示的画布：
function getTextWidth(text, font) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.font = font || getComputedStyle(document.body).font;
return context.measureText(text).width;
}
如果您需要更改它，您可以只传递字体，它基本上是一个 CSS 字体声明。
请尝试以下解决方案。
var getWidthOfText = function(text, styles) {
var isObjectJSON = function(obj) {
return obj && typeof obj === 'object' && !Array.isArray(obj);
};
var element = document.createElement('div');
if (isObjectJSON(styles)) {
var styleKeys = Object.keys(styles);
for (var i = 0, n = styleKeys.length; i < n; ++i) {
element.style[styleKeys[i]] = styles[styleKeys[i]];
}
}
element.style.display = 'inline-block';
element.innerHTML = text;
document.body.appendChild(element);
var width = element.offsetWidth;
document.body.removeChild(element);
return width;
};
如果要将任何样式附加到外层，则需要将第一个参数作为要检查其宽度的文本/HTML 和第二个参数传递。