Vuetify 3 text is not ellipsed on v-autocomplete

Question

I'm using Vuetify 3 and trying to truncate long text in a v-autocomplete component using text-overflow: ellipsis, but it doesn't seem to work. Here's my code:

<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'],
  }),
})

Here for testing https://codepen.io/luigisaggese/pen/mdgMRBw

Answer 1

Adding maxWidth property it solve the issue (for example 200)

:menu-props="{ top: true, offsetY: true, maxWidth:200}"