Wrap selected text with Select2

问题

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.

回答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.

来源：https://stackoverflow.com/questions/30788171/wrap-selected-text-with-select2