使 select2 多选不换行到多行

Question

有没有办法在选择足够的值时使多选不换行？举个例子，它的作用如下：

我想要的是将其全部包含在一行中并且只能水平访问。 Select2 提供箭头键导航以及删除键用法，因此这不是什么大问题。

我认为这可能可以通过 CSS 来完成，但我正在努力弄清楚需要做什么。

Answer 1

一种方法是：

小提琴：http://jsfiddle.net/EHzcc/735/

CSS：

.select2-choices{
    display:-webkit-inline-box;
}

更新：

.select2-choices{
    display:-webkit-inline-box;
    max-width: 250px;   //  <--- set the max width you want
    //width: 250px;              or just force the width
}

更新N： 玩方向也许： http://jsfiddle.net/wEqLt/

---

更新最新版本： 小提琴：http://jsfiddle.net/EHzcc/735/

CSS：

.select2-selection__choice{
    float: none !important;
    display: inline-block !important;
}

---

4.1 版本更新： 小提琴：http://jsfiddle.net/srg2deo5/

CSS：

.select2-selection{
  overflow-y:auto;
  white-space:nowrap;
}

ul.select2-selection__rendered{  
    white-space: nowrap;
}

Answer 2

.select2-selection__choice {   
    /*float: left;*/ //remove float and add display: inline    
    display: inline;
}

Answer 3

.select2-container--default .select2-selection--multiple, 
.select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single{
   height:auto !important;
}

Answer 4

试试这个代码：

.select2-selection__rendered {
    max-height: 80px;
    overflow-y: auto !important;
}

Answer 5

对于那些使用 Bootstrap 和

select2-bootstrap-5-theme

的人来说，我发现在

<span class="select2-search select2-search--inline">...</span>

中输入下一个选项的光标总是会换行到第二行，一旦选择了选项，高度就会加倍。如果有人来这里寻找这个问题，我是这样解决的：

span.select2-selection.select2-selection--multiple {
  /* Display the choices and search input on one line, not wrapped */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

ul.select2-selection__rendered {
  /* Don't wrap the choices on to separate horizontal rows */
  flex-wrap: nowrap !important;
}

span.select2-selection__choice__display {
  /* Don't wrap text within selected choices */
  white-space: nowrap !important;
}

Answer 6

.select2-selection__rendered {
white-space:normal!important;
}