Jquery 使用Select2和Bootstrap进行文本截断

我目前遇到了一个问题，使用Select2结合引导布局使选择看起来更漂亮（更实用）

问题是，选定内容中最长的元素在选定后会被截断。虽然这不是选择本身的问题，但它看起来很奇怪（尤其是短值），并使用户很难检查他们选择的内容。有关示例，请参见下面的屏幕截图。在这种情况下，用户如果不重新打开选择列表，就无法在选择a或B时进行检查

据我所知，问题可能是由Select2在顶层

span

上设置的

宽度引起的。我不确定如何修复它，最好的方法是什么。感觉最好的办法是让顶层跨度稍微大一点，但我不知道该如何确定它的位置

另一种方法是将
文本溢出
属性设置为非
省略号
。但我觉得我错过了更明显的东西。我想象不出这以前不是一个问题

我的方法是否合理，或者我是否缺少一个可以解决这个问题的方法

MWE的代码如下所示，使用JQuery 1.12并选择2 4.0.3。它也可以作为一个


$（文档）.ready（函数（）{
console.log（“JS”）；
$（“select”）.select2（{}）；
});
某物
不一样的东西
不一样的东西
试试这个：

如果您设置
最小宽度
，则您将删除小文本

#selection {
  min-width:150px;
}

您还可以像这样在select div中添加填充


#选择{填充：10px；}

$（文档）.ready（函数（）{
console.log（“JS”）；
$（“select”）.select2（{}）；
});
某物
不一样的东西
不一样的东西
您可以用
包装div
包装选择，给该包装一个最大宽度，并给选择
宽度：100%

HTML-

下面是一个工作示例-


$（文档）.ready（函数（）{
$（“select”）.select2（{}）；
});
。选择--wrapper{
最大宽度：200px；
宽度：100%
}
#挑选{
宽度：100%；
}

某物
不一样的东西
不一样的东西
我也有同样的问题，经过大量研究，这是自2012年以来的一个已知问题，看起来它将在Select2 4.1.0-beta.0中修复


现在，您可以使用以下CSS临时修复它：

.select2-selection--multiple .select2-search--inline .select2-search__field {
       width: auto !important;
}

你可以用！重要的是要覆盖插件设置的宽度，并为顶层跨度设置最小宽度，在firefox上，它只在chrome上显示所有文本，没有省略号。与为选择设置
min width
的方法相比，这是否有优势？它将帮助您做出响应性设计（移动、平板电脑、桌面兼容）. 因为你不必为你的选择一次又一次地定义宽度。哦，这是一个很好的观点，但是对于你的设计，我无论如何都必须改变它，对吗？目前，您正在将
select--wrapper
设置为固定大小200px。由于它将始终是100%宽，最大可达200px，因此它将始终是200px宽。至少在我有限的测试中似乎是这样。由于我不必真正关注响应性，我可能会使用
minwidth
方法。虽然这是可行的，但我不知道为什么。我猜Select2在基本选择列表上进行了某种测量。在DOM中，我怀疑存在“错误”维度的元素会根据select上的填充进行调整，而它是一个相邻元素。我真的不明白“rid out”是什么意思，但这种方法正在发挥作用，从当前的答案来看，这是他最容易理解的方法。实际上，它与v-stackOverFollower的问题相同。
<div class="select--wrapper">
  <select id="selection">
      <option>Something</option>
      <option>Something different A</option>
      <option>Something different B</option>
    </select>
</div>

.select--wrapper {
  max-width: 200px;
  width: 100%
}

#selection {
  width: 100%;
}

.select2-selection--multiple .select2-search--inline .select2-search__field {
       width: auto !important;
}