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/

使用默认下拉菜单时，我会看到价值＆＃34; Harju maakond＆＃34;但是对于select2，我看到＆＃34; Harju ma ...＆＃34;

设置下拉菜单的确切宽度不是一种选择，因为我不知道最大宽度。内容正在发生变化。

宽度：＆＃39;自动＆＃39;选项也不合适，因为我希望在页面渲染后修复宽度。

任何解决方案如何设置宽度与原始下拉菜单相同？

Answer 1

您可以尝试使用纯CSS扩展!important框（请注意.select2-container { width: 200px !important; } 规则）：

var text = 'WorkAppComponentBackOfficeLaunchTechnologyNeteseen';
var array = text.split('');
len = 18;//length of a single row

var newtext = '';
for(var i=0;i<array.length;i++) {
   newtext +=array[i];
if (i % len == 0 && i>1) {
    newtext += '</br>';//or \n\r
    }
}
document.getElementById('text').innerHTML = newtext;

请参阅此azure。

Answer 2

4.0.3中似乎不支持“resolve”选项

最好的办法是在初始化select2时使用width：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指定font-size以及在使用select2（）转换下拉列表后，我能够解决问题。