Wrap the selected text with Select2
How can I get the selected text in Select2 to wrap instead of using ellipsis? Option elements are wrapped, but I would like the input field to be able to expand rather than exceed.
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;
}
Removing these properties does not do the trick, however, because they are still nested in other containers.
+3
source to share
1 answer
I think the element .select2-selection__rendered
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>
Update
!important
not required. Thanks to @KyleMit for pointing this out.
+7
source to share