“选择”下拉菜单中的选项文本溢出浏览器

Question

我使用<select>在我的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>

如何解决这个问题？

Answer 1

不合作的选择啊。众所周知，这些家伙是叛逆的。你可能已经环顾四周，找到了一些关于如何处理这些人的旧建议，但是你会发现曾经工作过的东西不再存在，或只能在几种浏览器中工作，或者在台式机上工作但不能在移动设备上工作等。

不幸的是，我所知道的CSS解决方案是可靠的，如果发现它可以在所有主流浏览器和平台上运行，那并不意味着明天它将继续成为可行的解决方案。这是典型的表单元素，因为浏览器开发人员自己留下了很多东西来控制行为和默认样式。

与任何表单元素一样，关于可靠一致的跨平台解决方案的唯一选择是替换表单元素。隐藏原生元素并将更合规的冒名顶替者放在其位置。

对于表单选择Chosen.js通常是转到库。我相信'ag-select'是一个选择的实现，可以帮助你在这里。 https://ng-select.github.io/ng-select#/data-sources

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