Jquery 调整引导选择组件大小的问题

我决定使用一个插件（）来美化引导选择元素。这个插件使用div、ul和li为每个选项重建select及其选项。 我有一个用例，其中选项宽度有点长，我想为包含它们的下拉列表设置一个最大宽度，并在需要时显示一个滚动条。到现在为止，一直都还不错。 虽然下拉菜单的大小调整得很好，但我看到的是一个非常奇怪的焦点框。这是一个截图

发生这种情况是因为LIs大小没有增加以匹配文本的大小。我知道这一点，因为我使用chrome开发工具增加了宽度

LI在不同的浏览器上看起来不同，但问题是相同的

我想添加一个css（或者在最坏的情况下添加一个脚本），可以将LIs的大小调整到适当的宽度来解决这个问题，但我不知道怎么做

你能帮忙吗

谢谢

HTML

<select class="my-select">
<option>Option 1 is way too long for this small select and it will overflow for sure</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

CSS

.my-select div.dropdown-menu {
  width: 200px;
}

---

编辑

我希望修复此问题，并保留滚动条，以便选择组件的外观如下所示：

只需添加以下css：

.dropdown-menu span.text{
    white-space:normal;
}

---

如果你想要一个独立的卷轴，你可以试试

.dropdown-menu li{
   height:35px;
   overflow:scroll 
}

（根据需要调整高度）

CSS（）

---

我真的很喜欢这个解决方案，+1。但我也想知道，如果你能做到这一点，迫使滚动条的x方向，而不是包装的text@Alexander在x方向强制滚动条是什么意思？上面的屏幕截图显示了我希望保留的x方向的滚动条。有没有办法解决这个问题而不必包装文本？谢谢Alexander你能添加一张你到底想要什么的图片吗？我已经更新了问题，请查看新的屏幕快照不，我不想要独立的滚动条。我只想要一个在底部，请看截图。谢谢你的发帖。

.dropdown-menu li{
   height:35px;
   overflow:scroll 
}

.bootstrap-select.btn-group .dropdown-menu li{
  display:block;
  float:left;
  clear:both;
  min-width:100%;
}