Vuetify 3中v-autocomplete组件文本无法实现省略号截断求助

你的CSS样式未生效的核心原因是：.basic类被应用到了v-autocomplete的外层容器，而实际承载文本的是组件内部的子元素（如下拉列表项的.v-list-item-title、输入框内的.v-field__input），需要直接定位这些元素才能实现截断效果。

正确实现代码 #

HTML #

<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;
}

/* 截断下拉菜单中的选项文本 */
.basic .v-list-item-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* （可选）截断输入框内已选中的文本 */
.basic .v-field__input {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

JavaScript #

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['Foo', 'Bar', 'Fizz', 'Buzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz'],
  }),
})

通过上述修改，下拉菜单中的长选项文本和输入框内选中的长文本都会自动截断并显示省略号。

内容的提问来源于stack exchange，提问作者Luigi Saggese