如何使用jQuery Select2插件避免标签折行并实现单行显示？

要实现Select2多选标签单行显示、超出容器时水平滚动，且输入框与标签保持同行，只需覆盖默认CSS样式即可，具体方案如下：

自定义CSS样式 #

添加以下样式修改Select2的默认布局行为：

/* 调整多选容器滚动方向，禁用垂直滚动 */
.select2-container--bootstrap-5 .select2-selection--multiple {
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

/* 强制标签容器单行排列，输入框紧跟标签 */
.select2-container--bootstrap-5 .select2-selection__rendered {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

/* 避免输入框被压缩，设置最小宽度 */
.select2-container--bootstrap-5 .select2-search--inline .select2-search__field {
  flex-shrink: 0;
  min-width: 150px;
}

完整示例代码 #

将上述CSS嵌入页面，完整可运行代码如下：

<!doctype html>
<html lang="en" class="h-100">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
  <script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
  
  <!-- 自定义样式 -->
  <style>
    .select2-container--bootstrap-5 .select2-selection--multiple {
      overflow-y: hidden;
      overflow-x: auto;
      white-space: nowrap;
    }
    .select2-container--bootstrap-5 .select2-selection__rendered {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.5rem;
    }
    .select2-container--bootstrap-5 .select2-search--inline .select2-search__field {
      flex-shrink: 0;
      min-width: 150px;
    }
  </style>
  
  <script>
    $(document).ready(function() {
      $("#token-ids").select2({
        theme: "bootstrap-5",
        placeholder: "Enter Values Here",
        tags: true,
        tokenSeparators: [',', ' '],
      });
    });
  </script>
</head>
<body>
  <select class="form-control" id="token-ids" name="token-ids[]" multiple="multiple"></select>
</body>
</html>

效果说明 #

• 所有多选标签保持单行排列，超出容器宽度时自动显示水平滚动条
• 输入框始终紧跟最后一个标签后方，不会被挤到下一行
• 保留原有标签间距与垂直对齐效果，不破坏原有UI风格

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