如何让Selectize.js多选输入框始终保持单行显示？

这个问题我之前碰到过好几次，其实核心就是通过CSS调整Selectize的容器样式，强制选中的标签保持单行不换行，避免内容被隐藏。下面是具体的解决方案：

方案一：横向滚动显示所有选中项（推荐） #

这种方式会让选中的标签在单行排列，超出容器宽度时显示横向滚动条，用户可以拖动查看所有内容，体验更友好：

/* 针对你的Selectize输入框容器（如果是全局生效就直接用.selectize-input，否则给容器加自定义类名） */
.selectize-input {
  white-space: nowrap; /* 强制所有内容在单行显示，禁止换行 */
  overflow-x: auto; /* 超出宽度时显示横向滚动条 */
  overflow-y: hidden; /* 隐藏垂直方向的滚动，避免不必要的滚动条 */
  height: 40px; /* 这里替换成你设置的固定高度 */
  line-height: 40px; /* 可选，让标签垂直居中 */
  flex-wrap: nowrap !important; /* 部分Selectize版本用flex布局，强制关闭自动换行 */
}

/* 保持标签的inline-block布局，确保它们在单行排列 */
.selectize-input .item {
  display: inline-block;
  margin-right: 6px; /* 保持标签之间的间距，可根据需求调整 */
}

方案二：超出部分显示省略号（适合不需要查看全部项的场景） #

如果你的场景不需要用户看到所有选中项，只需要显示部分并提示有更多内容，可以用这个方案：

.selectize-input {
  white-space: nowrap;
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 在末尾显示省略号 */
  height: 40px; /* 你的固定高度 */
  line-height: 40px;
}

注意事项 #

• 如果你的页面中有多个Selectize输入框，不想全局生效，可以给目标<select>元素添加自定义类名（比如class="single-line-selectize"），然后CSS选择器改成.single-line-selectize .selectize-input，避免影响其他组件。
• 测试时记得清除浏览器缓存，确保新的CSS样式生效。

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