Div 不要缩小超过另一个 Div 推送的段落

Question

我是新手，我尝试制作一张没有 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>

Answer 1

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

不过，省略应该很容易，但一定要遵守规则： 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;}

Div 不要缩小超过另一个 Div 推送的段落

Div don't shrink more than paragraph pushed by another Div

html

css

shrink

编辑