Prevent content from overflowing horizontally - css

Question

In this codepen Vuetify demo, I'm using a two column layout. The first column has a <v-list> inside a green <v-alert>. If you click the "toggle text" button, the title of the first item in the list toggles between short and long.
When the text is long, it overflows the <v-alert> and runs into the adjacent column
How can I prevent this? I would ideally like the text to be truncated with ellipsis once it reaches the edge of the green <v-alert> or if that is not possible, for the text to wrap over multiple lines within the alert.
I've tried adding the following class to the text, but it doesn't prevent the overflow
.prevent-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Answer 1

If you want the text to not over flow the green container, you need to set the overflow there.
<v-alert text color="success" class="prevent-overflow">
will be where you aim.
Just to be clear, overflow sets on the contained items, when you set an over flow to your div, what you mean is - I want whats inside of this div to act like this if it goes beyond it.
For the ellipsis you will need to set 2 things, 1 is on the title add text-over: ellipsis, no need in word wrap and all, it will just cause the text to go down, unless thats what you want.
Second thing is to set width to the div that holds the text directly.
In your case for a quick fix you can do for example:
.v-list-item__title {
width: 20px;
}
.prevent-overflow2 {
text-overflow: ellipsis;
}