Ellipsis with transition

Question

For a project, I'm trying to use the CSS property text-overflow: ellipsis in order to complete the following animation . However, when I'm trying to apply this property, with white-space: nowrap and overflow: hidden , on .card-dish__info , the three dots don't appear and the overflowing text is hidden behind the checkmark and price.

When I tried to apply this property on .card-dish and .card-dish__byline , the checkmark animation is directly blocked. I also tried another advice of limiting the width of .card-dish__info , but it also doesn't work...

Here is my code:

 .card-dish { display: flex; justify-content: space-between; background-color: white; border-radius: 15px; margin-bottom: 15px; width: 340px; overflow: hidden; cursor: pointer; box-shadow: 3px 3px 13px 1px rgba(0, 0, 0, 0.1); }.card-dish__info { display: flex; flex-flow: column wrap; margin: 10px 0 10px 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.card-dish__heading { display: inline; margin: 0; font-family: Roboto; font-size: 16px; font-weight: bold; color: black; }.card-dish__byline, .card-dish__price { margin: 5px 0 0 0; font-family: Roboto; font-size: 14px; font-weight: normal; color: black; }.card-dish__check { display: flex; }.card-dish__price { margin: 34px 0 5px 0; }.card-dish__checkmark { background-color: #99e2d0; border-radius: 0 15px 15px 0; width: 60px; margin: 0 -61px 0 15px; transition: margin-right 1.5s; }.card-dish:hover.card-dish__checkmark { margin-right: 0; }

 <script src="https://kit.fontawesome.com/ 1f544e41e8.js" crossorigin="anonymous"></script> <div class="card-dish"> <div class="card-dish__info"> <h6 class="card-dish__heading">Herb-Encrusted Steak</h6> <p class="card-dish__byline">With delicately sliced and seasoned vegetables</p> </div> <div class="card-dish__check"> <p class="card-dish__price">40€</p> <div class="card-dish__checkmark"> </div> </div> </div>

I thank in advance anyone who will take the time to help me.

Answer 1

The problem is that the width of the .card-dish__byline doesn't decrease in order for the text-overflow to take place. You should also add the text-overflow: ellipsis to the .card-dish__byline . Add this to your css:

.card-dish__byline {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 280px;
  transition: width 1.5s;
}
.card-dish:hover .card-dish__byline {
  width: 230px;
}