如果选择了带有长文本的选项，则选择元素100％宽度错误（Select2 bootstrap主题）

Question

我正在使用带有bootstrap 3主题的select2和select2元素溢出容器，如果选择了带有长文本的选项并且元素的宽度是100％。

这只发生在Mozilla Firefox !!

我创建了一个example

.select2-container {
  width: 100% !important;
}

这是影响元素溢出的代码

span.select2-selection__rendered {
  white-space: nowrap;
}

Answer 1

设置内联样式：

<select class="select2" style="width:100%">

评论.select2-container extra css：

/*.select2-container {
    width: 100% !important;
}*/

添加＆＃39;元素＆＃39; select2 init上的宽度：

$('.select2').select2({
     width: 'element',
    minimumResultsForSearch: Infinity
  });
});

示例：http://jsfiddle.net/chemark/z9sLqLbx/

如果您使用的是bootstrap，请尝试使用此解决方案： http://xcellerant.net/2015/09/17/fixing-the-width-of-a-select-2-with-a-long-value-in-a-bootstrap-form-group-or-input-group/

Answer 2

如果您使用引导程序，那么它将起作用。

.form-group > .select2-container {
    width: 100% !important;
}

Answer 3

这对我有用，使用select2和bootstrap 4：

.select2-container{ width: 100% !important; }

Answer 4

放入jQuery：

$('.select2-container').css("width","100%");