你可以像下面这样使用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;
    };

您需要传递第一个参数作为要检查其宽度的text/HTML，如果要将任何样式附加到外层，则需要传递第二个参数。