Avoid select box widening when long option is chosen

Question

I am working with a dashboard, containing panels. Each panel has a limited width as the dashboard contains quite a lot of information.

Each panel contains a table listing certain users and an Angular dropdown selector to add more.

When selecting a user whose name is longer than the width of the box, it expands, pushing both the box and the adjacent button out of the panel, even sometimes overlapping the one next to it.

Here's how the element is written in the markup :

<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>

I would like the name to be cut when needed, ideally by showing something like [Jonathan LEI...]in the box or just, as I had attempted, reducing the size of the font.

Any help is greatly appreciated.

Answer 1

经过一段时间的研究并尝试了不同的选择，这是我所学到的：

• 由于我使用的是 Angular ，因此在这种情况下修改<select>标记选项并不有用：标记会创建一个包含多个<div>的{​​{1}}其他<div>标签。它们使用bower_components文件中定义的 CSS 样式。
• 根据加载文件的顺序，有些可能会覆盖以前设置的参数。
• 在我的情况下，某些属性：width可以传递动态值（比如width: 100%; AND !important选项，覆盖任何其他值相同的属性。
• 正如Dipnesh所提到的，选项text-overflow: ellipsis;正是这种情况所需要的，问题就在于把它放在哪里以便它能够完成它的工作。