Currently, I am working on a project where I am trying to utilize the CSS property text-overflow: ellipsis
to achieve a specific animation. However, despite applying this property along with white-space: nowrap
and overflow: hidden
to .card-dish__info
, I am facing an issue where the three dots representing the overflow are not visible and instead, the text extends behind the checkmark and price.
I experimented by implementing these properties on .card-dish
and .card-dish__byline
, only to find that it interferes with the checkmark animation. Another attempt involved restricting the width
of .card-dish__info
, but unfortunately, that did not resolve the problem...
Below is the snippet of my code:
[CSS CODE HERE]
[HTML CODE HERE]
I would greatly appreciate any assistance provided in troubleshooting this issue.