使用Select2包装选定的文本 [英] Wrap selected text with Select2

问题描述

如何在 Select2 中获取所选文字，而不使用省略号？

下面是一个示例： / p>

  $（'。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 =select2style =width：100px> < option value =AL>通常不会显示的真正长名称< / option> < option value =AK>阿拉斯加< / option> < option value =AZ>亚利桑那州< / option>< / select>  

默认情况下， Select2添加以下代码：

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

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

解决方案

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

  .select2-selection  -  single {
 height：100％ ！重要; 
} 
 .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 =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 =select2style =width：100px> < option value =AL>通常不会显示的真正长名称< / option> < option value =AK>阿拉斯加< / option> < option value =AZ>亚利桑那州< / option>< / select>  

更新

！important 感谢@KyleMit指出它。

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.

解决方案

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.

这篇关于使用Select2包装选定的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！