如何实现按钮hover时仅放大字号且保持容器尺寸不变？

要实现「按钮未hover时自适应内容，hover时仅放大字号且不换行、不影响布局」的效果，推荐以下两种可行方案：

方案1：用<span>包裹文本，通过transform缩放实现无布局偏移的字号放大 #

这种方法能完全保持按钮的占位（宽高、位置）不变，仅视觉上放大文本，同时确保文本不换行：

HTML结构 #

<button class="button-1">
  <span>自适应按钮文本</span>
</button>

CSS样式 #

.button-1 {
  display: inline-block;
  /* 让按钮自适应内容宽度 */
  white-space: nowrap;
  /* 强制文本不换行 */
  padding: 0.5em 1em;
  border: none;
  background-color: #e0e0e0;
  /* 保留原始自适应特性：宽高随字号、字重、文本长度变化 */
}

.button-1 span {
  transition: transform 0.3s ease;
  transform-origin: center;
  /* 以文本中心为缩放原点 */
}

.button-1:hover span {
  transform: scale(1.2);
  /* hover时放大文本，可自行调整缩放比例 */
}

方案2：用calc()配合内边距、字号调整，保持按钮高度不变 #

如果不想额外嵌套<span>，可以通过计算内边距来维持按钮高度，仅宽度随文本放大略有变化（若需宽度完全不变，还是推荐方案1）：

CSS样式 #

.button-1 {
  display: inline-block;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1;
  /* 初始内边距，可根据需求调整 */
  padding: 0.5rem 1rem;
  border: none;
  background-color: #e0e0e0;
  /* 同步过渡字号和内边距，保证动画流畅 */
  transition: font-size 0.3s ease, padding 0.3s ease;
}

.button-1:hover {
  font-size: 1.2rem;
  /* 计算内边距，让按钮总高度（字号 + 上下内边距*2）与初始状态一致 */
  padding-top: calc(0.5rem - (1.2rem - 1rem)/2);
  padding-bottom: calc(0.5rem - (1.2rem - 1rem)/2);
  /* 左右内边距可适当增加，避免文本溢出按钮 */
  padding-left: calc(1rem + (1.2rem - 1rem)/2);
  padding-right: calc(1rem + (1.2rem - 1rem)/2);
}

关键说明 #

• white-space: nowrap是确保文本不换行的核心属性，必须添加；
• 方案1的transform: scale()仅改变视觉表现，不会影响元素布局，完全避免了hover时的布局偏移问题；
• 方案2通过calc()动态调整内边距，维持按钮高度稳定，适合允许宽度轻微变化的场景。

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