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

Question

I'm new and I try to make a check card without JS, but i wan't to shrink the name of the dish when it's too long for the card with dots, but all I can make it's the div don't want to be smaller and my animate div stay small...

I want to get my animate div pushing by the right side and hide the dish's extra name with dots..

I made a codepen with: https://codepen.io/steven-fabre/pen/NWbowdO

Thanks by advance, you will be my hero !

I did an awful paint to show what i want when it's checked:

 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

I didnt quite understand what you meant by animating.

However, the elipsis should be easy, but make sure to follow the rules: CSS text-overflow: ellipsis; not working?

This is the result I ended up with

or

By adding this scss:

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

---

EDIT

I am assuming this is what you want:

But you also want the elipsis to be dynamic..

I am not going to give you the entire solution, but here is what you need to do:

use javascript to adjust the width of the text in pixels whenever the checkbox is clicked.

here is the code:

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

remove input {display: none;}