Html 选项文本在“选择”下拉列表中溢出浏览器

我在AngularJS应用程序中使用

有一个下拉列表。如果选项文本过长，下拉列表将溢出浏览器窗口，如下所示：

我尝试添加div并使用

overflow-x:auto

指定固定宽度。还尝试了文本换行，但没有任何效果。这是我的下拉列表的html：

<div class="form-group col-md-12">
    <label>Status*</label>
    <select class="form-control" id="cmbStatus" ng-model="cmbStatusSelected"        
            ng-options="item.attribValue for item in lstCaseStatus">
            <option value="">-- Select --</option>
    </select>
</div>

地位*
--挑选--

---

我该如何解决这个问题？

啊，不合作的选择。这些家伙是出了名的叛逆。你可能已经环顾四周，找到了一些关于如何对付这些家伙的老建议，但你会发现，曾经有用的东西不再有用，或者只在几个浏览器中有效，或者在台式机上有效，但在移动设备上无效等等

不幸的是，据我所知，没有一个CSS解决方案是可靠的，如果发现一个可以在所有主要浏览器和平台上工作，这并不意味着它明天将继续是一个可行的解决方案。这是典型的表单元素，因为浏览器开发人员自己要控制的行为和默认样式太多了

因此，与任何表单元素一样，对于可靠、一致的跨平台解决方案，您唯一的选择就是替换表单元素。隐藏本机元素并放置一个更符合要求的冒名顶替者

For form selects selected.js通常是go to库。我相信“ag select”是select的一个实现，它将在这里帮助您

---

否则，另一种解决方案是将后端的选项文本截断为设置的字符宽度。如果您的项目中已经有一组选择，并且不想返回并在所有选择上实现ng select，那么截断标签可能是最好的解决方案

谢谢你这么详细的回答。对于这样一个显而易见的问题，没有简单可行的解决方案，这真是令人沮丧

ng select

看起来确实有助于解决我的问题，但我一开始就试图避免使用第三方解决方案。