如何获取超出div边界的文本实际占用宽度以实现按钮文本自适应

问题根源 #

你获取不到文本实际宽度的核心原因是：包裹文本的<div>是块级元素，默认宽度会占满父容器的可用宽度，所以拿到的clientWidth永远等于父按钮的内容宽度，和文本本身长度无关。

方案1：修改文本元素样式直接获取宽度 #

给文本元素加以下CSS，就能直接用clientWidth拿到实际文本宽度：

#button_text {
  display: inline-block;
  white-space: nowrap;
}

测量时可以临时给按钮设置overflow: visible，避免文本被裁剪导致测量不准，测量完成后可改回原有值。

方案2：用Range API无侵入测量文本宽度 #

不需要修改现有DOM和样式，直接用原生API测量指定元素内文本的实际宽度：

function getTextWidth(element) {
  const range = document.createRange();
  range.selectNodeContents(element);
  const rect = range.getBoundingClientRect();
  return rect.width;
}

这个方法会直接返回元素内文本的实际渲染宽度，不受元素本身display属性影响。

完整自适应逻辑实现 #

按照你需要的逐步减小字号适配的需求，完整代码如下：

const button = document.getElementById('button');
const buttonText = document.getElementById('button_text');
const questionText = document.getElementById('question_text');

// 获取文本实际宽度
function getTextWidth(element) {
  const range = document.createRange();
  range.selectNodeContents(element);
  return range.getBoundingClientRect().width;
}

// 适配字号逻辑
function fitTextToButton() {
  // 获取按钮的可用宽度（减去左右内边距，可根据实际样式调整）
  const buttonPadding = parseFloat(getComputedStyle(button).paddingLeft) + parseFloat(getComputedStyle(button).paddingRight);
  const maxWidth = button.clientWidth - buttonPadding;
  let currentFontSize = parseFloat(getComputedStyle(buttonText).fontSize);
  
  // 逐步减小字号直到文本宽度小于最大可用宽度，最小字号限制为10px避免无法阅读
  while (getTextWidth(buttonText) > maxWidth && currentFontSize > 10) {
    currentFontSize -= 1;
    buttonText.style.fontSize = `${currentFontSize}px`;
  }
  
  // 测试输出
  questionText.innerText = `按钮可用宽度：${maxWidth}px，文本实际宽度：${getTextWidth(buttonText).toFixed(1)}px，最终字号：${currentFontSize}px`;
}

// 页面加载完成后执行，窗口大小变化时也重新适配
window.addEventListener('load', fitTextToButton);
window.addEventListener('resize', fitTextToButton);

补充说明 #

你之前用canvas.measureText出错大概率是canvas默认有不透明背景，且插入到了DOM可视区域内，只要创建离屏canvas不插入页面就不会影响现有元素显示，Range API的方案更简单更适合你的需求。

内容的提问来源于stack exchange，提问作者user12810571