如何避免<span>元素修改textContent时发生尺寸变化？

方法1：给按钮设置固定最小宽度 #

通过给.button设置min-width（推荐用ch单位适配字符长度），确保按钮宽度始终能容纳最长的文本（原文本和临时文本），文本切换时按钮宽度不会变化，整个面板也就不会偏移。

修改后的CSS：

.controls {
  text-align: center;
}

.button {
  border: 1px solid black;
  padding: 4px;
  /* 容纳最长文本"Clicked!"的宽度，7个字符左右 */
  min-width: 7ch;
  /* 让按钮内文本居中，避免留白显得不协调 */
  display: inline-block;
  text-align: center;
}

JS和HTML无需改动，即可实现面板位置稳定。

方法2：用绝对定位实现文本重叠 #

如果不想固定宽度，让按钮宽度自然适配最长文本，可通过嵌套子元素+绝对定位实现文本重叠，父元素宽度由最长的文本决定，切换时仅显示/隐藏文本，元素尺寸保持不变。

修改后的HTML：

<div class="controls">
  <span class="button">One</span>
  <span class="button">Two</span>
  <span class="button" id="three">
    <span class="original-text">Three</span>
    <span class="clicked-text">Clicked!</span>
  </span>
</div>

CSS：

.controls {
  text-align: center;
}

.button {
  border: 1px solid black;
  padding: 4px;
  position: relative;
  /* 让父元素宽度由最长的子文本撑开 */
  display: inline-block;
}

.button span {
  /* 两个文本元素完全重叠 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 继承父元素的内边距 */
  padding: inherit;
}

.clicked-text {
  /* 默认隐藏临时文本 */
  display: none;
}

JS：

const three = document.getElementById('three');
const originalText = three.querySelector('.original-text');
const clickedText = three.querySelector('.clicked-text');

three.addEventListener('click', () => {
  originalText.style.display = 'none';
  clickedText.style.display = 'flex';
  setTimeout(() => {
    originalText.style.display = 'flex';
    clickedText.style.display = 'none';
  }, 1000);
});

方法3：使用flex布局统一按钮宽度 #

如果希望所有按钮宽度一致，可将.controls改为flex容器，让按钮均分宽度，单个按钮文本变化不会影响整体布局：

CSS修改：

.controls {
  display: flex;
  justify-content: center;
  gap: 8px; /* 按钮间的间距 */
}

.button {
  border: 1px solid black;
  padding: 4px;
  /* 让所有按钮均分可用宽度 */
  flex: 1;
  max-width: 100px; /* 可选：限制最大宽度 */
  min-width: 7ch;
  text-align: center;
}

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