make select2 multi-select not wrap to multiple lines

Question

Is there a way to make a multi-select not wrap when selecting enough values to do so? As an example, here's what it does:

What I want is for it to all be contained in one line and be accessible horizontally only. Select2 provides arrow key navigation as well as delete key usage so that isn't a big deal.

I figure this can probably be done with CSS but I'm struggling to figure out what needs to be done.

Answer 1

One way is :

Fiddle: http://jsfiddle.net/EHzcc/735/

CSS:

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

UPDATE :

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

UPDATE N : Play with direction maybe : http://jsfiddle.net/wEqLt/

---

UPDATE FOR NEWEST VERSION: Fiddle: http://jsfiddle.net/EHzcc/735/

CSS:

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

---

UPDATE FOR VERSION 4.1: Fiddle: http://jsfiddle.net/srg2deo5/

CSS:

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

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