如何实现电话按钮通过Transition扩展宽度且文本不换行？

核心解决方案 #

给显示电话号码的<span id="tel">添加以下CSS样式，强制文本保持单行，避免过渡过程中换行：

#tel {
  white-space: nowrap;
  overflow-x: hidden;
}

样式作用说明 #

• white-space: nowrap：强制文本始终在同一行显示，不会因容器宽度不足自动换行。
• overflow-x: hidden：当容器宽度还没过渡到足够容纳文本时，隐藏超出容器的部分，而非换行展示。

代码优化建议（可选） #

把JS中直接操作内联样式的逻辑改成通过CSS类切换，更便于维护和扩展：

1. 新增控制状态的CSS类：

.tel-parent-expanded {
  width: 190px !important;
}
.increase-width-expanded {
  width: 100% !important;
}
.tel-visible {
  display: block !important;
}

2. 简化JS事件逻辑：

const increaseWidthBtn = document.getElementById("increase-width");
const telParent = document.querySelector('#tel-parent');
const tel = document.querySelector('#tel');

increaseWidthBtn.addEventListener('mouseover', function() {
  telParent.classList.add('tel-parent-expanded');
  this.classList.add('increase-width-expanded');
  tel.classList.add('tel-visible');
});

increaseWidthBtn.addEventListener('mouseout', function() {
  telParent.classList.remove('tel-parent-expanded');
  this.classList.remove('increase-width-expanded');
  tel.classList.remove('tel-visible');
});

这样修改后，样式逻辑集中在CSS中，JS仅负责状态切换，代码结构更清晰。

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