Vuetify多选v-select组件文本换行问题解决方案咨询

Hey there, I’ve dealt with this exact problem in Vuetify before—great question! The default behavior of v-select’s multi-select is to expand the component height when too many items are selected, but we can tweak the CSS to make the selected items wrap instead while keeping the component height fixed. Here’s how to do it:

Step 1: Update Your CSS Styles #

Modify your existing .area-select class and add styles targeting Vuetify’s internal v-select elements to control the selections container:

.area-select {
  margin-left: 10px;
  margin-right: 10px;
  width: 280px;
  /* Lock the component's height to prevent expansion */
  max-height: 80px;
  min-height: 80px;
  box-sizing: border-box;
}

/* Target the container that holds all selected items */
.area-select .v-select__selections {
  /* Allow selected tags to wrap to new lines */
  flex-wrap: wrap;
  /* Limit the height of the selections area */
  max-height: 60px;
  /* Add vertical scroll when content overflows */
  overflow-y: auto;
  /* Add padding to prevent items from touching container edges */
  padding: 4px 8px;
}

/* Optional: Improve spacing between selected tags for readability */
.area-select .v-select__selection {
  margin-bottom: 4px;
  margin-right: 4px;
}

How This Works #

• Fixed Component Height: Setting max-height and min-height on .area-select locks the component’s overall size so it won’t stretch when more items are selected.
• Wrap Selected Items: flex-wrap: wrap on .v-select__selections makes the selected tags break into new lines instead of pushing the component taller.
• Scrollable Overflow: overflow-y: auto ensures that if there are far too many selected items, users can scroll through them without breaking the component’s fixed height.

Customization Tips #

Feel free to adjust the max-height values to match your design—80px for the component and 60px for the selections container is just a starting point. You can also tweak the padding and margin values to get the exact spacing you want.

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