解决CSS动画滑块交互时的文本省略及多余空白问题

问题描述 #

复刻外卖APP菜单卡片组件，需求如下：

• 卡片包含文本区域、价格，鼠标悬停时右侧“OK”滑块左移显示
• 当滑块覆盖文本（屏幕缩小或悬停状态）时，文本自动显示省略号
  当前问题：滑块右移隐藏“OK”时，文本无法占据剩余空间，显示异常。

问题根源 #

使用transform: translateX()仅改变元素视觉位置，不会修改元素的布局占位空间。原代码中.slider默认宽度为118px（price+check的宽度之和），即便通过transform右移隐藏check，它依然占据118px的布局空间，导致文本区域被过度挤压，无法利用剩余宽度。

解决方案 #

改用宽度过渡替代transform实现滑块效果，同时调整文本区域的flex属性，确保其自适应剩余空间：

修改后的CSS代码

body {
  margin: 0 13px;
  font-family: "Roboto", sans-serif;
}

p {
  margin: 0;
}

.main-container {
  max-width: 768px;
  box-sizing: border-box;
  width: 100%;
}

.menu-item {
  width: 100%;
  height: 69px;
  display: flex;
  border-radius: 15px;
  box-shadow: 0px 4.01149px 15.0431px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.menu-text {
  min-width: 0; /* 确保文本省略号生效 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 15px;
  flex: 1; /* 关键：占据滑块之外的所有剩余空间 */
}

.menu-text p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price,
.check {
  width: 59px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.check {
  background: #99e2d0;
  border-radius: 0 15px 15px 0;
}

.slider {
  display: flex;
  width: 59px; /* 默认仅显示价格区域 */
  overflow: hidden;
  transition: width 0.5s ease-in-out; /* 宽度过渡实现滑块效果 */
}

.menu-item:hover .slider {
  width: 118px; /* 悬停时展开完整滑块（价格+OK） */
}

关键修改点

1. 文本区域设置flex:1：让.menu-text自动填充滑块之外的剩余空间，替代原有的width:100%，确保布局自适应。
2. 滑块改用宽度过渡：默认宽度设为59px（仅显示价格），悬停时扩展为118px（显示价格+OK），配合overflow:hidden隐藏超出部分，同时修改布局占位空间，让文本区域能正确响应宽度变化。
3. 移除justify-content: space-between：flex布局下flex:1已能让文本区域占满剩余空间，无需额外对齐属性。

效果验证 #

• 正常状态：滑块仅显示价格，文本区域占满剩余宽度，内容过长时自动显示省略号
• 悬停状态：滑块展开显示OK，文本区域被挤压，自动触发省略号效果
• 屏幕缩小时：文本区域随容器宽度变化，始终保持自适应省略

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