选择长选项时避免选择框加宽

Question

我正在使用包含面板的仪表板。由于仪表板包含相当多的信息，每个面板的宽度都是有限的。

每个面板都包含一个列出某些用户的表格和一个角度下拉选择器以添加更多内容。

当选择一个名称长于盒子宽度的用户时，它将展开，将盒子和相邻按钮从面板中推出，有时甚至有时会重叠在旁边的按钮上。

这里的元素是怎么写的标记：

<td> 
     <select chosen style="font-size: 75%" options="users" id="selectedTechnicianUser" ng-model="selectedUser" ng-change="addUser(selectedUser)" class="form-control" search-contains="true" display-selected-options="false" ng-options="<query...>"> 
     </select> 
</td> 

我想的名字在需要的时候需要进行切割理想的通过显示类似[Jonathan LEI...]在框中或只是，我曾试图，降低字体的大小。

任何帮助，非常感谢。

Answer 1

经过一段时间花在研究和多次尝试不同的选项，这里是我学到的东西：

• 由于我使用的角，事实证明，修改<select>标签选项ISN”在这种情况下非常有用：标签创建一个<div>，其中包含多个其他<div>标签。这些使用CSS在bower_components文件中定义的样式。
• 根据加载文件的顺序，有些可能会覆盖以前设置的参数。
• 某些属性，在我的情况：width可以传递一个动态值（说width: 100%;和的!important选项，为同一属性覆盖任何其他值
• 作为mentionned由Dipnesh，选项text-overflow: ellipsis;到底是什么的在这种情况下需要解决的问题是如何处理它的工作