CSS中如何避免内部文本缩放时div随之缩放？

完全可行，核心思路是用CSS变换缩放替代直接修改字体大小，既能实现hover放大效果，又不会改变元素的布局空间，自然不会让周围文本移位。

问题根源 #

你之前直接修改font-size时，元素的实际盒模型尺寸会跟着变化，flex容器会重新计算布局分配空间，所以周围元素会被挤得移位。

解决方案代码 #

HTML保持不变，修改CSS如下：

.text-container {
  display: flex;
  flex-flow: row nowrap;
}

.text {
  font-size: 2rem;
  margin-right: 2rem;
  cursor: pointer;
  transition: all 200ms;
  border: 1px solid coral;
  /* 可选：设置缩放原点，让文本从左侧居中位置开始放大，视觉更自然 */
  transform-origin: left center;
}

.text:hover {
  /* 用scale实现缩放，1.5对应放大到原尺寸的1.5倍，可按需调整 */
  transform: scale(1.5);
}

原理说明 #

• transform: scale()是视觉层面的缩放，只会改变元素的显示大小，不会修改它在布局中占据的空间（元素的原始宽高、margin等布局属性都不变），所以flex容器不会重新布局，周围元素位置完全不受影响。
• 不需要硬编码max-width/max-height，元素的布局空间由初始字体大小和文本内容自动决定，缩放操作不会触动这个空间。

如果需要优化放大后的视觉体验，比如避免放大的文本被遮挡，可以给.text添加z-index: 1（hover时设更高值），或者调整transform-origin的位置，这些都属于可选的细节优化。

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