Trying to truncate long text in a v-autocomplete component using Vuetify 3 and text-overflow: ellipsis, but it's not working. Check out the code below:
<div id="app">
<v-app id="inspire">
<v-row align="center">
<v-col cols="12">
<v-autocomplete
:items="items"
:menu-props="{ top: true, offsetY: true }"
label="Label"
class="basic"
></v-autocomplete>
</v-col>
</v-row>
</v-app>
</div>
Css
.basic{
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
JS
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: ['Foo', 'Bar', 'Fizz', 'Buzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz'],
}),
})
Test it here: https://codepen.io/luigisaggese/pen/mdgMRBw