使用文本截断验证 v-btn

Question

任何人都知道如何使用带有 v 按钮的文本截断。我目前的尝试是这样的：

<v-menu
  offset-y>
  <template v-slot:activator="{on, attrs}">
    <v-btn
      text
      v-bind="attrs"
      v-on="on"
      :max-width="150"
      class="text-truncate"
      ><span class="text-truncate;max-width:150px">{{ userEmail }}</span></v-btn>
  </template>
  <v-list>
    <v-list-item-group>
    <v-list-item
      v-for="(item, index) in personalMenuItems"
      :key="index"
      @click="item.action">
      <v-list-item-title>{{ item.title }}</v-list-item-title>
    </v-list-item>
  </v-list-item-group>
 </v-list>
</v-menu>

Answer 1

确保正确设置最大宽度 style...

<v-btn text v-bind="attrs"
    v-on="on"
   :max-width="150">
   <span class="text-truncate" style="max-width:150px">{{ userEmail }}</span>
</v-btn>

Demo

使用文本截断验证 v-btn

vuetify v-btn with text-truncate

vuetify.js

v-btn