使用悬停CSS按下按钮后文本被截断

问题描述

我正在尝试使用CSS制作动画。悬停时从右到左转换的一种按钮。这样做将“推送”包含文本的div。因此，当该div缩小足够多时，文本将被截断，并出现3个点。我希望我足够清楚。试图用flex解决它，但是文本不想被推开！！！这是代码：

html：

<div class="menus">
  <div class="namePlat">
    <h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>
    <p>Lorem ipsumLorem ipsumLorem ipsum</p>
  </div>

  <div class="price">
    <p>25€</p>
  </div>
  <div class="Box">
    <div class="check">
      <img src="img/check24.png" alt="#">
    </div>
  </div>

</div>

css：

.price {
  position: absolute;
  right: 2em;
  top: 2em;
  width: 10%;
  transform: translateX(0);
  transition: transform 1000ms;
}

.Box {
  transform-origin: 100%;
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  background-color: yellow;
  border-radius: 0 20px 20px 0;
  color: green;
  transform: scaleX(0);
  transition: transform 1000ms;
  .check {
    position: absolute;
    right: 30%;
    top: 35%;
    margin: auto;
    transform: rotate(-360deg);
    transition: transform 1500ms ease-in-out;
  }
}

.namePlat {
  min-width: 0;
  white-space: Nowrap;
  p,h3 {
    max-width: 400px;
    white-space: Nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.menus {
  display: flex;
  cursor: pointer;
  &:hover>.Box {
    transform: scaleX(1);
    .check {
      transform: rotate(0deg);
    }
  }
  &:hover>.price {
    flex-shrink: 0;
    transform: translateX(-5em);
  }
  &:hover>.namePlat {
    flex: 1;
    min-width: 0;
    white-space: Nowrap;
    p,h3 {
      max-width: 400px;
      white-space: Nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animation animation hover truncate