固定尺寸按钮如何让文本自动换行并缩放以完全适配内部边界

现有代码问题排查 #

1. 你的.lower-button类设置了white-space: nowrap，强制文本不换行，这是文本水平溢出的直接原因
2. 自行计算尺寸不准的核心问题是没有用和实际按钮样式完全一致的离线镜像元素测试文本渲染尺寸，直接用当前按钮的clientWidth/clientHeight会受已有样式限制，无法获取文本真实渲染大小

修复步骤 #

第一步：修改CSS样式 #

替换.lower-button的原有规则，允许文本自动换行：

.lower-button {
  /* 删掉原有的white-space: nowrap */
  white-space: normal;
  word-break: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

第二步：添加文本自适应JS逻辑 #

function fitButtonText(button) {
  // 计算按钮内容区可用尺寸（扣除内边距）
  const paddingX = parseFloat(getComputedStyle(button).paddingLeft) + parseFloat(getComputedStyle(button).paddingRight);
  const paddingY = parseFloat(getComputedStyle(button).paddingTop) + parseFloat(getComputedStyle(button).paddingBottom);
  const maxWidth = button.clientWidth - paddingX;
  const maxHeight = button.clientHeight - paddingY;

  // 创建离线镜像测试元素，复制按钮所有文本相关样式
  const testEl = document.createElement('div');
  const buttonStyle = getComputedStyle(button);
  testEl.style.fontFamily = buttonStyle.fontFamily;
  testEl.style.fontWeight = buttonStyle.fontWeight;
  testEl.style.lineHeight = buttonStyle.lineHeight;
  testEl.style.width = `${maxWidth}px`;
  testEl.style.position = 'absolute';
  testEl.style.visibility = 'hidden';
  testEl.style.whiteSpace = 'normal';
  testEl.style.wordBreak = 'break-word';
  testEl.innerText = button.innerText;
  document.body.appendChild(testEl);

  // 从默认最大字号开始逐步缩小，直到文本高度适配内容区
  let fontSize = parseFloat(buttonStyle.fontSize);
  // 最小字号设置为8px，可根据需求调整
  while (fontSize > 8) {
    testEl.style.fontSize = `${fontSize}px`;
    if (testEl.offsetHeight <= maxHeight) break;
    fontSize -= 0.5;
  }

  // 应用适配后的字号，清理测试元素
  button.style.fontSize = `${fontSize}px`;
  document.body.removeChild(testEl);
}

// 初始化适配所有按钮
const buttons = [
  document.getElementById("answer_button_1"),
  document.getElementById("answer_button_2"),
  document.getElementById("answer_button_3"),
  document.getElementById("answer_button_4")
];
buttons.forEach(btn => fitButtonText(btn));

// 窗口尺寸变化时重新适配，可按需保留或删除
window.addEventListener('resize', () => {
  buttons.forEach(btn => fitButtonText(btn));
});

方案说明 #

该方案先保证文本超出水平宽度时自动换行，再通过离线镜像元素准确计算文本的实际渲染高度，逐步调整字号直到刚好适配按钮内容区域，既不会出现文本溢出，也不会无故缩小短文本的字号，完全符合按钮尺寸固定、仅调整文本的需求。

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