vuetify v-btn with text-truncate答案

【问题标题】：vuetify v-btn with text-truncatevuetify v-btn with text-truncate
【发布时间】：2021-06-09 21:24:29
【问题描述】：

任何人都知道如何将文本截断与 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>

【问题讨论】：

标签： vuetify.js v-btn

【解决方案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

【讨论】：