使用 JS 动态计算指定文本在 DOM 中所占用的宽度

1、利用 Canvas.measureText 方法

measureText 方法返回一个关于被测量文本 TextMetrics 对象包含的信息
MDN文档

typescript
const canvas = document.createElement('canvas')

// 取当前页面所使用的字体
const fontFamily = window.getComputedStyle(document.body).getPropertyValue('font-family')

/**
 * 计算文本在 DOM 中占据的宽度
 * @param text 文本
 * @param fontStyle 字体样式
 */
export const calcTextWidth = (text: string, fontStyle = '14px') => {
  const ctx = canvas.getContext('2d')
  if (!ctx) return 0
  ctx.font = fontStyle + ' ' + fontFamily
  const metrics = ctx.measureText(text)
  return Math.ceil(metrics.width)
}

2、使用 DOM 元素进行计算

javascript
function getTextWidth(text, font) {
  let span = document.createElement('span');
  span.innerText = text;
  span.style.font = font || '16px Arial';
  span.style.visibility = 'hidden';
  document.body.appendChild(span);
  let width = span.offsetWidth;
  document.body.removeChild(span);
  return width;
}