如何配置PrimeVue Multiselect实现选中项自动换行而非溢出截断？

实现方案 #

PrimeVue Multiselect组件默认未提供自动换行的内置配置，可通过覆盖组件默认CSS样式实现选中项溢出自动换行效果，无需修改组件业务逻辑：

1. 全局样式下直接添加以下CSS规则：

/* 选中项容器支持自动换行、高度自适应 */
.p-multiselect .p-multiselect-label {
  white-space: normal;
  flex-wrap: wrap;
  height: auto;
  gap: 4px;
  padding: 6px 8px;
}

/* 移除默认的文本截断规则 */
.p-multiselect .p-multiselect-label > span {
  text-overflow: unset;
  overflow: unset;
}

2. 如果项目中使用了<style scoped>的作用域样式，需要使用深度选择器修改：

:deep(.p-multiselect .p-multiselect-label) {
  white-space: normal;
  flex-wrap: wrap;
  height: auto;
  gap: 4px;
  padding: 6px 8px;
}

:deep(.p-multiselect .p-multiselect-label > span) {
  text-overflow: unset;
  overflow: unset;
}

配置完成后可自行给.p-multiselect设置固定宽度，选中项超出宽度后会自动换行，组件高度会随内容自适应，效果和Element Plus、Vuetify的多选组件一致。

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