使 select2 多选不换行到多行

Posted 2023-05-07

【中文标题】使 select2 多选不换行到多行

【英文标题】：make select2 multi-select not wrap to multiple lines

【发布时间】：2014-04-23 06:12:11

【问题描述】：

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

我想要的是它全部包含在一行中并且只能水平访问。 Select2 提供箭头键导航以及删除键的使用，所以这没什么大不了的。

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

【问题讨论】：

我们也在苦苦挣扎，因为我们甚至不知道您的 CSS + 标记是什么样的。

@Diodeus 我链接的图片来自select2s example page。

【参考方案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;

【讨论】：

我喜欢这个，但是有没有办法在这样做时将其限制为当前宽度？

我试过这个，但它很难选择选项和操纵选择框（即，它不会像我预期的那样在末尾插入光标）。

这是 select2 的一些固有缺点，还是根本不可能？

接近可用。我会从那里开始玩，但我认为这已经接近了。谢谢。

@JakubAdamec 给你，更新到 4.1

【参考方案2】：

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

【参考方案3】：

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

【讨论】：

欢迎来到 Stack Overflow！虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。