I have been experimenting with Vuetify cards and encountered an issue with their height. In the image below, you can see that the cards' height varies until it reaches a specified max-height of 225px. I want to implement a text-overflow: ellipsis feature once the content exceeds this limit.
https://i.sstatic.net/7gpXM.png
Vuetify code
<v-card rounded dark class="rounded-xl" max-height="225">
<v-card-text class="elip">{{info.description}}</v-card-text>
</v-card>
Approach taken
.elip{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
I introduced a CSS class called "elip", resulting in a single line card with an ellipsis effect at the end. https://i.sstatic.net/p3ght.png