如何判断按钮文本换行并动态切换border-radius样式？

字符数判断的方案确实不靠谱——不同字符的宽度差异（比如中英文字符、特殊符号），还有字体、字号的变化都会导致误判。下面提供两个基于实际渲染尺寸的可靠实现方法：

方法一：通过元素高度判断（适用于高度自适应的按钮） #

如果按钮宽度固定、高度随文本行数自适应，那么单行文本的高度等于按钮的行高，多行文本的高度会大于行高。我们可以通过对比这两个值来判断是否换行：

代码实现 #

// 初始检测所有按钮
function updateButtonStyles() {
  document.querySelectorAll('.grid-button').forEach(button => {
    const computedStyle = getComputedStyle(button);
    const lineHeight = parseFloat(computedStyle.lineHeight);
    const buttonHeight = button.clientHeight;

    if (buttonHeight > lineHeight) {
      button.classList.add('multi-line');
      button.classList.remove('single-line');
    } else {
      button.classList.add('single-line');
      button.classList.remove('multi-line');
    }
  });
}

// 页面加载完成后执行初始检测
document.addEventListener('DOMContentLoaded', updateButtonStyles);
// 窗口缩放时重新检测（适配响应式布局）
window.addEventListener('resize', updateButtonStyles);

对应的CSS：

.grid-button {
  /* 3列网格布局的固定宽度，根据实际需求调整 */
  width: calc(33.33% - 10px);
  line-height: 26px;
  padding: 10px 16px;
  border: none;
  /* 其他基础样式 */
}

.single-line {
  border-radius: 30px;
}

.multi-line {
  border-radius: 13px;
}

方法二：用隐藏测试元素判断宽度（适用于固定高度的按钮） #

如果按钮高度固定，文本换行后可能会溢出或被截断，这时候可以创建一个和按钮样式完全一致但强制不换行的隐藏元素，对比它的宽度和按钮的固定宽度：如果测试元素宽度超过按钮宽度，说明文本在按钮内会换行。

代码实现 #

// 创建隐藏的测试元素，确保样式和按钮完全一致
const testElement = document.createElement('span');
testElement.style.cssText = `
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  font: inherit;
  padding: inherit;
  border: inherit;
`;
document.body.appendChild(testElement);

function checkButtonLineBreak() {
  document.querySelectorAll('.grid-button').forEach(button => {
    // 同步按钮文本到测试元素
    testElement.textContent = button.textContent;
    const buttonWidth = button.offsetWidth;
    const testWidth = testElement.offsetWidth;

    if (testWidth > buttonWidth) {
      button.classList.add('multi-line');
      button.classList.remove('single-line');
    } else {
      button.classList.add('single-line');
      button.classList.remove('multi-line');
    }
  });
}

// 初始检测
document.addEventListener('DOMContentLoaded', checkButtonLineBreak);
// 窗口缩放、文本动态更新时都需要重新检测
window.addEventListener('resize', checkButtonLineBreak);
// 如果按钮文本是动态生成的，在文本更新后调用checkButtonLineBreak()即可

注意事项 #

• 确保测试元素的样式（字体、字号、内边距、边框等）和目标按钮完全一致，避免宽度计算误差。
• 如果按钮文本是动态更新的（比如接口返回、用户输入），必须在文本更新后重新调用检测函数。
• 两种方法都需要监听resize事件，适配窗口缩放后的布局变化。

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