Broken overflow on fixed width.

If select2 input has a limited with, the value overflow is broken as you can see on the following screenshot:

I use the following code to instanciate select2:

select.select2({
    width: '100%',
    placeholder: ' ',
    dropdownAutoWidth: true,
    minimumResultsForSearch: 10,
    allowClear: allowClearEnabled
});

Don’t know how to fix this issue, any idea?

Thanks.

[xmikew]

I’m using 4.0.0b3.

Whenever I selected a very long text, the overflow was not hidden like you describe. I had to add the following css to hide it:

.select2-selection--single {
  overflow: hidden;
  text-overflow: ellipse;
}

disclaimer: I’m a select2 neophyte.

[flickervale]

I have same trouble with you, then I found a way to fix it.

in view, I wrote this, <select class="select2" data-width="100%" multiple id="xref" name="xref[]"></select>

then in js, I wrote this $("#xref").select2({ containerCssClass: 'wrap' });

and add css in select2 css like this: .wrap.select2-selection--multiple { height: 100% } .select2-container .wrap.select2-selection--multiple .select2-selection__rendered li { word-wrap: break-word; text-overflow: inherit; white-space: normal !important }

hope this will help you ^^