Vuetify 3 文本在 v-autocomplete 上不会被省略

Question

我正在使用 Vuetify 3 并尝试使用 text-overflow: ellipsis 截断 v-autocomplete 组件中的长文本，但它似乎不起作用。这是我的代码：

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

这里进行测试 https://codepen.io/luigisaggese/pen/mdgMRBw

Answer 1

添加 maxWidth 属性可以解决问题（例如 200）

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