Div 收缩的幅度不会超过另一个 Div

如何解决Div 收缩的幅度不会超过另一个 Div

我是新来的，我尝试制作一张没有 JS 的支票卡，但是当它对于带点的卡片来说太长时我不想缩小菜的名称，但我只能让它成为 div 不'我不想变小，而我的动画 div 保持小...

我想让我的动画 div 向右推，并用点隐藏菜的额外名称..

我用以下代码制作了一个代码笔：https://codepen.io/steven-fabre/pen/NWbowdO

提前感谢，你将成为我的英雄！

我做了一个糟糕的油漆来显示我想要的东西：

input {
  display: none;
}

.dish-card {
  display: flex;
  background: white;
  border-radius: 20px;
  height: 70px;
  width: 337.5px;
  margin-bottom: 13px;
  background: red;
}

.add-dish {
  display: flex;
  position: initial;
  top: initial;
  left: initial;
  width: 100%;
}

.add-dish span {
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 15px;
  align-self: flex-end;
  margin-right: 30px;
}

.dish-card-description {
  display: flex;
  align-items: center;
  padding: 0 0 0 10px;
  width: 100%;
  max-width: 315px;
  justify-content: space-between;
}

.dish-name {
  display: flex;
  flex-direction: column;
  flex-shrink: 3;
  padding: 3px;
  max-width: 100%;
  min-width: 50px;
  align-self: center;
  flex-wrap: wrap;
  white-space: Nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dish-name h2 {
  font-size: 18px;
  flex-wrap: wrap;
  margin: 0;
}

.dish-name p {
  font-size: 17px;
  flex-wrap: wrap;
  margin: 0;
}

.dish-check {
  display: flex;
  Box-sizing: content-Box;
  border-radius: 0 20px 20px 0;
  width: 0;
  margin-left: 10px;
  justify-content: center;
  align-items: center;
  transition: linear 0.2s;
}

.fa-check {
  visibility: hidden;
  font-size: 13px;
  background-color: green;
  border-radius: 50px;
  padding: 3px;
  color: red;
}

input:checked~.dish-name {
  width: 170px !important;
  background-color: yellow;
  transition: linear 0.2s;
}

input:checked~.dish-check {
  width: 70px;
  transform: scale(1);
  background-color: pink;
  transition: linear 0.2s;
}

input:checked~.dish-check .fa-check {
  animation: visibility 0.5s forwards 0.2s;
}

@keyframes visibility {
  from {
    transform: rotate(-180deg);
  }
  to {
    visibility: visible;
    transform: rotate(0);
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">


<div class="dish-card">
  <label class="add-dish">
    <input type="checkBox">
    <div class="dish-card-description">
      <div class="dish-name">
        <h2>Coquilles Saint-Jacques</h2>
        <p>Accompagnées d'une purée de panais</p>
      </div>
      <span>40€</span>
    </div>
    <div class="dish-check">
      <i class="fas fa-check"></i>
    </div>
  </label>
</div>

解决方法

我不太明白你说的动画是什么意思。

但是，省略号应该很容易，但请确保遵循以下规则： CSS text-overflow: ellipsis; not working?

这是我最终得到的结果

或

通过添加此 scss：

.dish-card {
  .dish-name h2{
  height: 18px;
  width: 100px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  }
}

---

编辑

我假设这就是您想要的：

但您也希望省略号是动态的..

我不会向您提供完整的解决方案，但您需要执行以下操作：

每当单击复选框时，使用 javascript 以像素为单位调整文本的宽度。

代码如下：

.dish-card {
  position: relative;
  .dish-name p{
  height: 18px;
  width: 250px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  }
}

input{
  appearance: none;
  &:before {
    position: absolute;
    display: block;
    content: '';
    opacity: 0;
    border-radius: 20px;
    height: 70px;
    width: 337.5px;
    top: 0;
    left: 0;
  }
}

删除input {display: none;}