用 Select2 换行选定的文本

Posted 2023-05-07

【中文标题】用 Select2 换行选定的文本

【英文标题】：Wrap selected text with Select2

【发布时间】：2015-08-27 14:01:20

【问题描述】：

如何让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 adds the following code:

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

但是，删除这些属性并不能解决问题，因为它们仍然嵌套在其他容器中。

【参考方案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 指出。

【讨论】：

请注意，这里不需要!important。您只需要比当前选择器具有更高的specificity 度数。此外，除非您想应用到每个 select2 对象，否则最好使用一个类来选择性地应用样式。这是fiddle with both of those examples

嘿，谢谢你的来信。我有一种感觉，它不是必需的，但由于某种原因它不起作用。刚刚意识到在代码中首先加载了 sn-p 样式表，然后加载了 css，因此它不起作用。无论如何，谢谢