How to wrap text inside multiple v-select in vuetify?

Question

i have a v-select component as shown below:

<v-select
  class="area-select"
  v-model="selectedAreas"
  multiple
  :items="areas"
  item-text="label"
  item-value="key"
  label="Select" />

...

.area-select {
  margin-left: 10px;
  margin-right: 10px;
  width: 280px;
}

As you have noticed it accepts multiple values. It also has set certain width. The problem is, when i select too many options from this component, it increases it's height. How could i wrap text shown in select, instead of enlarging it? Thanks for any help.

Answer 1

I believe there isn't an easy way for us to wrap the displayed text then adding an ellipsis or adding overflow: hidden.

But, if you want to maintain the <v-select/>'s height even if there are more than one selection, you might want to use this implementation instead.

Basically, you'll show a minimum number of selections, then specify how many remaining selections you'll have. You will use the selection slot of <v-select/> for this implementation.

<v-select
  ...
>

  <template v-slot:selection="{ item, index }">
    <span v-if="index < maxDisplay">{{ item.label }} &nbsp;</span>
    <span
      v-if="index === maxDisplay"
      class="grey--text caption"
    >(+{{ selectedAreas.length - maxDisplay }} areas)</span>
  </template>

</v-select>

data: () => ({
  maxDisplay: 2, // how many selections will be displayed on `<v-select/>`
  selectedAreas: [{ label: "Area 51", key: 1 }],
  areas: [
    { label: "Area 51", key: 1 },
    { label: "Area 52", key: 2 },
    ...
    { label: "Area 59", key: 9 }
  ]
})

Here is a sample demo at codesandbox.

Answer 2

Height always expand when multiple selected content is large. Best solution is to Show counts of selected items as you can always de-select by clicking select again.

You can modify select portion as below.

 <v-select
        class="area-select"
        v-model="selectedAreas"
        multiple
        :items="areas"
        item-text="label"
        item-value="key"
        label="Select">
              <template v-slot:selection="{ index }">
                 <span v-if="index === 0"> Area ({{ selectedAreas.length }})</span>
              </template>
 </v-select>