如何解决过渡动画时文本重叠而非显示省略号的问题

问题描述 #

两段元素设置在同一行，容器尺寸不足时第一段文本本应显示省略号；同时设置了hover时右侧滑入勾选框的效果，但应用过渡动画后，第二段元素会重叠第一段，无法触发省略号效果。

修复方案 #

核心问题：原代码用transform: translateX(-65px)移动价格元素，仅做视觉位移，元素实际占位空间未改变，因此不会触发左侧文本的省略号。需通过调整元素实际布局空间触发省略号，同时保留动画流畅性。

修改步骤 #

1. 给.menu-details添加overflow: hidden，并让.menu-desc通过flex: 1占据剩余空间，确保左侧文本在空间不足时自动收缩显示省略号。
2. 移除.item-price的transform位移，改为通过调整.menu-item的padding-right收缩内容空间，同时给价格元素添加margin-right过渡，模拟位移效果。
3. 同步容器内边距和勾选框的过渡动画，保持视觉一致性。

修改后的代码 #

CSS #

.menu-item {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 10px;
  padding: 10px 20px 10px 10px;
  margin: 0px 10px;
  gap: 3px;
  box-shadow: 0px 0px 5px 1px lightgray;
  position: relative;
  overflow: hidden;
  /* 同步padding变化的过渡 */
  transition: padding-right 1s ease;
}

.fa-check {
  box-sizing: content-box;
  padding: 7.5px 6px;
  border-radius: 50%;
  background: white;
  font-size: 15px;
  color: #99E2D0;
}

.menu-item:hover .fa-check {
  transform: rotate(360deg);
  transition: transform 800ms ease;
}

.item-price {
  /* 用margin-right替代transform，改变实际占位 */
  margin-right: 0;
  transition: margin-right 1s ease;
}

.menu-item:hover .item-price {
  margin-right: -65px;
}

.order-check {
  width: 65px;
  height: 100%;
  background: #99E2D0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(65px);
  transition: transform 1s ease;
}

.menu-item:hover .order-check {
  transform: translateX(0px);
}

.menu-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden; /* 确保内部元素超出时被裁剪 */
}

.menu-desc {
  flex: 1; /* 占据剩余空间 */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 10px; /* 给价格留基础间距 */
}

.bold {
  font-weight: bold;
}

.small-font {
  font-size: 13px;
}

HTML #

<script src="https://kit.fontawesome.com/06b1522f9a.js" crossorigin="anonymous"></script>
<div class="menu-item">
  <div class="order-check">
    <i class="fa-solid fa-check fa-fw"></i>
  </div>
  <p class="bold">Duck Foie Gras</p>
  <div class="menu-details">
    <p class="small-font menu-desc">This text is overlapped by the price on transition but I want it to become an ellipsis</p>
    <p class="bold small-font item-price">35€</p>
  </div>
</div>

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