用Select2包装所选文本

Question

如何将Select2中的选定文本换行而不是使用省略号？选项项包装,但我希望输入字段能够向下扩展而不是结束.

这是一个例子:

$('.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>

默认情况下,Select2添加以下代码:

.select2-selection--single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

但是,删除这些属性并不起作用,因为它们仍然嵌套在其他容器中.

Answer 1

我认为这是.select2-selection__rendered需要一些调整的元素.这样的事怎么样？

.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不需要.感谢@KyleMit指出它.