make select2 multi-select不包装到多行

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;
}

Answer 2

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

Answer 3

您可以限制选择的数量：

http://ivaynberg.github.io/select2/#code_e19

$("#selector").select2({ maximumSelectionSize: 3 });

Answer 4

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