How to apply CSS style for Angular JS drop down

Question

Hi I have an requirement to show the Dropdown using angular JS.

In this drop down some values are having some 250 characters so dropdown becomes very big in size and the whole page itself becomes very big in size so I want to control this using some CSS styles but i dont know to do it for angular Js select drop down.

  <table>
   <tr>
    <td>
      <select ng-model="newrelatedFault" ng-options="item.FaultIdAndName for item in relatedFaults track by item.Id | filter: Fault.relatedFaults.isSelected(item)">
       <option value="">@selectLabel</option>
       </select>
     </td> <td>
     <a ng-click="Fault.relatedFaults.add(newrelatedFault.Id, newrelatedFaultDescription); newrelatedFault = null; newrelatedFaultDescription = null;" ng-disabled="newrelatedFault == null" class="btn btn-link btn-action"><i class="icon-plus" title="Add New"></i>Add</a>
                    </td>
                </tr>
            </table>

Answer 1

You could use a truncation with an ellipsis, as described in this article by Chris Coyier .

All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

A bunch more techniques here, including multi-line ellipsis .