CSS text-overflow: ellipsis与过渡动画兼容问题求助

问题核心 #

当前代码存在两个关键问题：

• 文本溢出省略号未生效：card-dish__info使用flex-flow: column wrap，且将white-space: nowrap等溢出属性加在了容器上，而非单个文本元素；同时容器未被限制宽度，导致文本会被右侧价格/对勾挤压遮挡。
• 动画与溢出兼容问题：直接给父容器加溢出属性会阻断对勾的margin动画，需要调整布局逻辑，让动画元素和文本区域互不干扰。

修复方案 #

1. 调整文本区域布局：让card-dish__info占据卡片剩余宽度，确保文本有足够空间展示，同时给每个文本元素单独设置溢出省略样式。
2. 重构对勾动画布局：用flex布局替代负margin，避免遮挡文本，同时保留hover动画效果。

完整修复代码 #

CSS

.card-dish {
  display: flex;
  background-color: white;
  border-radius: 15px;
  margin-bottom: 15px;
  width: 340px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 3px 3px 13px 1px rgba(0, 0, 0, 0.1);
}

.card-dish__info {
  flex: 1; /* 占据卡片剩余所有宽度 */
  display: flex;
  flex-direction: column; /* 去掉wrap，改为垂直排列 */
  margin: 10px 0 10px 15px;
  padding-right: 15px; /* 给右侧留出空间，避免被价格/对勾挤压 */
  overflow: hidden;
}

/* 给每个文本元素单独设置溢出省略 */
.card-dish__heading,
.card-dish__byline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  font-family: Roboto;
}

.card-dish__heading {
  font-size: 16px;
  font-weight: bold;
  color: black;
}

.card-dish__byline {
  margin-top: 5px;
  font-size: 14px;
  font-weight: normal;
  color: black;
}

.card-dish__check {
  display: flex;
  align-items: center; /* 垂直居中价格 */
  position: relative; /* 用于定位对勾元素 */
}

.card-dish__price {
  margin: 0 15px; /* 调整margin，避免遮挡 */
  font-family: Roboto;
  font-size: 14px;
  font-weight: normal;
  color: black;
}

.card-dish__checkmark {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #99e2d0;
  border-radius: 0 15px 15px 0;
  width: 60px;
  transform: translateX(100%); /* 初始状态移出卡片 */
  transition: transform 0.5s ease; /* 用transform替代margin动画，更流畅 */
}

.card-dish:hover .card-dish__checkmark {
  transform: translateX(0); /* hover时滑入 */
}

HTML

<script src="https://kit.fontawesome.com/1f544e41e8.js" crossorigin="anonymous"></script>

<div class="card-dish">
  <div class="card-dish__info">
    <h6 class="card-dish__heading">Herb-Encrusted Steak With Extra Long Name To Test Ellipsis</h6>
    <p class="card-dish__byline">With delicately sliced and seasoned vegetables and more extra text to test overflow</p>
  </div>
  <div class="card-dish__check">
    <p class="card-dish__price">40€</p>
    <div class="card-dish__checkmark">
      <!-- 可添加图标，比如：<i class="fas fa-check"></i> -->
    </div>
  </div>
</div>

关键修改说明 #

• card-dish__info添加flex:1，确保它占据除右侧价格/对勾外的所有宽度，同时去掉flex-flow: column wrap，改为flex-direction: column，避免文本换行错乱。
• 将溢出省略属性从容器移到card-dish__heading和card-dish__byline上，每个文本块单独处理溢出。
• 对勾元素改用position: absolute和transform实现动画，替代原来的负margin，避免挤压文本区域，动画也更流畅。
• 给card-dish__info添加padding-right，确保文本不会紧贴右侧元素。

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