Wrap selected text with Select2

Question

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.

Merryman

Answer 1

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>

Update

!important is not required. Thanks to @KyleMit for pointing it out.

Odont

Just a note that you don't need !important here. You just need to have a higher degree of specificity than the current selector. Also, unless you want to apply to every select2 object, it's probably better to use a class to apply the styles selectively. Here's a fiddle with both of those examples – Merryman

hey, thanks for the note. I had a feeling that it was not required but for some reason it was not working. Just realized that in code snippet stylesheet was loaded first and css next and hence it was not working. Anyways, thanks – Odont

Answer 2

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  white-space: normal;
  overflow: hidden;
  text-overflow: inherit;
  height: 35px !important;
}

Lafrance

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Brackish