This unique Vuetify demo on CodePen showcases a two-column layout. The first column contains a <v-list> enclosed in a green <v-alert>. By clicking the "toggle text" button, you can switch the title of the first list item between short and long forms.
However, there is an issue when the text is long - it spills over the boundaries of the <v-alert> and extends into the adjacent column.
https://i.stack.imgur.com/7NDaB.png
To address this problem, I would like to either truncate the overflowing text with ellipsis once it reaches the edge of the green alert, or allow the text to wrap onto multiple lines within the alert box.
I attempted to resolve this by applying the following CSS class to the text, but unfortunately, it did not prevent the overflow:
.prevent-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}