選擇長選項時避免選擇框加寬

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;到底是什麼的在這種情況下需要解決的問題是如何處理它的工作