发生过渡时如何阻止文本重叠

Question

我在同一行有两个段落元素。当容器太小而无法容纳他们两个时，第一段开始变成省略号。我还有一个复选标记，它在悬停时从右侧滑入。问题是，当我应用这个滑入式过渡时，第二段与第一段重叠，而不是变成省略号。我该怎么做才能解决此问题？

这里是代码链接：https://jsfiddle.net/L47kx6fe/6/

这就是我想要创建的：https://giphy.com/gifs/KzDopDzjZeJGV0pxTX

   <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>

.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;
}

.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;
    animation-fill-mode: forwards;
  }

.item-price {
    transition: 1s ease;
}

.menu-item:hover .item-price {
    transform: translateX(-65px);
    transition: transform 1s ease;
}

.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);
    transition: transform 1s ease;
    animation-fill-mode: forwards;
}

.menu-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.bold {
    font-weight: bold;
}

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

Answer 1

在菜单详细信息中设置转换。不是商品价格。

.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;
}

.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;
    animation-fill-mode: forwards;
}
.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);
    transition: transform 1s ease;
    animation-fill-mode: forwards;
}
.menu-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 1s ease;
    width:100%;
}
.menu-item:hover .menu-details {
    width: calc(100% - 65px);
}

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

.bold {
    font-weight: bold;
}

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

   <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 text text text text text text text text text text text</p>
     <p class="bold small-font item-price">35€</p>
   </div>
 </div>