Element Plus el-select多选模式下collapse-tags宽度问题终极解决方案（附完整CSS代码）

Element Plus el-select多选模式下collapse-tags宽度异常问题深度解析与实战解决方案

1. 问题现象与版本背景

最近在升级Element Plus到2.5.0+版本后，不少开发者反馈el-select组件在多选模式下启用collapse-tags属性时出现了意外的布局问题。具体表现为：

• 当选择项过多时，折叠标签会出现强制换行
• 组件高度异常增加导致父容器布局破坏
• 在响应式布局中表现尤为明显

这个问题在GitHub上已被标记为issue #15459，主要影响2.5.0及以上版本。通过版本对比测试发现：

版本范围	表现情况	主要差异
<2.5.0	正常折叠	采用固定宽度计算
≥2.5.0	异常换行	改为100%宽度策略

2. 问题根源分析

通过Chrome开发者工具深入检查DOM结构，可以发现几个关键点：

1. DOM结构变化：

<div class="el-select__tags">
  <span>
    <span class="el-tag">...</span>
    <span class="el-tag__close">...</span>
  </span>
</div>

2. 样式计算差异：

/* 2.4.4及以下版本 */
.el-select__tags {
  max-width: calc(100% - 60px);
}

/* 2.5.0+版本 */
.el-select__tags {
  width: 100%;
}

3. 关键影响因素：
   • 新版移除了max-width限制
   • 内部span元素默认display: inline-block行为
   • white-space属性继承问题

提示