Question

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

以下是：

＆＃13;

<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>

＆＃13;

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

＆＃13;

默认情况下Select2 adds the following code：

$id_a=1; $id_b = 2;
$format = "The id %d is related to id %d\n";
echo sprintf($format, $id_a, $id_b);
// operations go in here that calculate new values for $id_ variables
$id_a=124214; $id_b=325325;
echo sprintf($format, $id_a, $id_b);

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

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指出它。

用Select2包装所选文本

1 个答案:

更新