Select2多选时如何让每个选中选项单独显示一行？

你提到用grid实现了每行一个选中项，这里还有几种可行的实现方式，以及你之前用templateSelection无效的原因：

1. Flex布局替代Grid #

和Grid思路类似，用Flex纵向排列更简洁，还能灵活控制间距：

.select2-selection__rendered {
  display: flex;
  flex-direction: column;
  gap: 6px; /* 可选，给选中项之间加间距 */
  max-height: 200px; /* 可选，超过高度时显示滚动条 */
  overflow-y: auto;
}

这种方式兼容性和Grid差不多，适配大多数现代浏览器。

2. 将单个选中项设为块级元素 #

直接修改选中项的display属性，强制每个选项独占一行：

.select2-selection__rendered {
  padding: 8px 0; /* 调整内边距适配块级布局 */
}
.select2-selection__choice {
  display: block;
  width: 100%;
  margin: 4px 8px; /* 调整边距避免挤在一起 */
}

这种方式不需要修改容器的布局模式，只针对单个选中项生效，对原有布局的影响更小。

3. 修复templateSelection添加换行无效的问题 #

你之前尝试用templateSelection加换行标签无效，是因为Select2默认会转义HTML内容。要让HTML生效，需要关闭escapeMarkup配置：

$('.your-select2-element').select2({
  templateSelection: function(item) {
    // 返回带换行的HTML（注意XSS风险，确保选项内容可信）
    return `${item.text}<br>`;
  },
  escapeMarkup: function(markup) {
    return markup; // 禁用HTML转义
  }
});

不过这种方式需要配合容器的布局调整（比如设为block）才能让换行生效，而且存在XSS风险，仅当选项内容完全可控时使用。

4. 利用Select2的selectionCssClass配置隔离样式 #

如果不想全局修改Select2样式，可以初始化时给选中区域加自定义类名，再针对性写样式：

$('.your-select2-element').select2({
  selectionCssClass: 'select2-multi-vertical'
});

然后写样式：

.select2-multi-vertical .select2-selection__rendered {
  display: grid;
  gap: 4px;
}

这种方式避免影响页面上其他Select2组件。

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