jquery-select2選擇的值部分可見

Question

由於某些原因，在某些情況下，select2（版本4.0.3）顯示部分選定的值。

HTML：

Selected value partially visible<select name="example" id="wraps"> 
<option value="71.0">Harju maakond</option> 
<option value="73.0">Hiiumaa</option> 
<option value="48.0">Ida-Virumaa</option> 
</select> 
<br> 
Selected value fully visible 
<select name="example2"> 
<option value="71.0">Harju maakond</option> 
<option value="73.0">Hiiumaa</option> 
<option value="48.0">Ida-Virumaa</option> 

</select> 

JS：

$('#wraps').select2({width: 'resolve', dropdownAutoWidth : true}); 

結果：

result

小提琴也 https://jsfiddle.net/nhqzzf64/2/

使用默認下拉菜單時，我看到值「Harju maakond」但select2我看到「Harju ma ...」

設置下拉的確切寬度不是一個選項，因爲我不知道最大寬度。內容正在改變。

width：'auto'選項也不適合，因爲我想在頁面渲染後修復寬度。

任何解決方案如何設置寬度與原來的下拉相同？

Answer 1

你可以嘗試擴大select2箱純CSS（注意!important規則）：

.select2-container { 
    width: 200px !important; 
} 

看到這個fiddle。

Answer 2

的「決心」選項不會出現在4.0.3

你最好的支持是使用寬：初始化選擇2時，100％，並把你控制寬度的容器內的元素。

$('#wraps').select2({ 
    width: '100%' 
}); 

$('#wraps').select2({width: '100%'});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 

 
Selected value fully visible 
 
<select name="example" id="wraps"> 
 
<option value="71.0">Harju maakond</option> 
 
<option value="73.0">Hiiumaa</option> 
 
<option value="48.0">Ida-Virumaa</option> 
 
</select> 
 

 
<p></p> 
 
Selected value fully visible 
 
<select name="example2"> 
 
<option value="71.0">Harju maakond</option> 
 
<option value="73.0">Hiiumaa</option> 
 
<option value="48.0">Ida-Virumaa</option> 
 
</select>

Answer 3

我能夠通過CSS和與SELECT2該轉換下拉後得到的原始寬度（）和指定也字體大小時，以解決課題的手段（）。