如何让BootstrapVue多选下拉框实现自动换行适配移动端

问题原因 #

BootstrapVue的b-form-select（多选模式下）默认给选中项容器设置了white-space: nowrap，导致文本在窄屏（如移动端）无法自动换行，出现截断。

解决方案 #

通过自定义CSS覆盖默认样式，允许文本自动换行：

1. 全局样式修改

将以下CSS添加到你的全局样式文件（如main.css或App.vue的非scoped样式标签）：

/* 允许多选下拉框的选中项文本换行 */
.b-form-select-multiple .b-form-select-chosen {
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* 可选：让下拉选项内的文本也支持换行 */
.b-form-select-multiple .b-form-select-option {
  white-space: normal !important;
}

2. 组件内局部修改（scoped样式）

如果需要在单个组件内生效，使用Vue的深度选择器（::v-deep）突破scoped限制：

::v-deep .b-form-select-multiple .b-form-select-chosen {
  white-space: normal !important;
  word-wrap: break-word !important;
}

3. 确认模板配置

确保你的b-form-select已经开启多选模式（添加multiple属性）：

<div class="col-md-12 col-12">
  <b-form-select v-model="example" multiple>
    <option v-for="item in array" :key="item.id">
      {{ item.text }}
    </option>
  </b-form-select>
</div>

说明 #

• white-space: normal 允许文本在容器宽度不足时自动换行
• word-wrap: break-word 确保长单词或连续字符也能被拆分换行
• 使用!important是为了覆盖BootstrapVue的默认内联样式优先级

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