vuetify v-btn with text-truncate

Question

Any one know how to use text-truncate with v-button. My current attempts are this:

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

score 2 · Accepted Answer · answered Jun 09 '21 at 13:24

2

Make sure your properly setting the max-width 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

answered Jun 09 '21 at 13:24

Carol Skelly

351,302
90
710
624

vuetify v-btn with text-truncate

1 Answers1