How can I get the selected text in Select2 to wrap instead of using an ellipsis? The option items wrap, but I'd like the input field to be able to expand down instead of over.
Here's an example:
$('.select2').select2();
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<select class="select2" style="width:100px">
<option value="AL">Really long name that normally wouldn't be visible</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
By default Select2 adds the following code:
.select2-selection--single {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
However, removing these properties doesn't do the trick because they are still nested in other containers.
New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control: var data = { id: 1, text: 'Barn owl' }; var newOption = new Option(data. text, data.id, false, false); $('#mySelect2'). append(newOption).
Select2 allows you to change the way that the dropdown works, allowing you to do anything from attach it to a different location in the document or add a search box. It is common for decorators to attach to the render and position methods to alter how the dropdown is altered and positioned.
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
I think it is the .select2-selection__rendered
element that needs some tweaking.
How about something like this ?
.select2-selection--single {
height: 100% !important;
}
.select2-selection__rendered{
word-wrap: break-word !important;
text-overflow: inherit !important;
white-space: normal !important;
}
$('.select2').select2();
.select2-selection--single {
height: 100% !important;
}
.select2-selection__rendered{
word-wrap: break-word !important;
text-overflow: inherit !important;
white-space: normal !important;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<select class="select2" style="width:100px">
<option value="AL">Really long name that normally wouldn't be visible</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
!important
is not required. Thanks to @KyleMit for pointing it out.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With