title: Protractor - How to verify text selection in dropdown list is not cut off
body: <p>I have a dropdown list where when I select some elements. The text appears cut off in the dropdown box. I need to be able to validate that the text is not cut off in my protractor test.</p>
  
  <pre><code>&lt;select class="form-control add_reason_select ng-pristine ng-empty ng-invalid  ng-invalid-required ng-touched" required="" name="reason_id" ng- options="EntranceReason.Reason for EntranceReason in  selectedTransition.EntranceReasons track by EntranceReason.Id" ng- change="selectReason(selectedTransition.selectedReason)" ng- model="selectedTransition.selectedReason" style=""&gt;
  &lt;option value="?" selected="selected"&gt;&lt;/option&gt;
  &lt;option label="Candidate withdrew" value="1"&gt;Candidate withdrew&lt;/option&gt;
  &lt;option label="Cannot meet applicant salary requirements" value="2"&gt;Cannot meet applicant salary requirements&lt;/option&gt;
  &lt;option label="Conflict of interest" value="3"&gt;Conflict of interest&lt;/option&gt;
  &lt;option label="Did not meet pre-employment requirements" value="11"&gt;Did not meet pre-employment requirements&lt;/option&gt;
  &lt;option label="Does not meet minimum qualifications" value="12"&gt;Does not meet minimum qualifications&lt;/option&gt;
  </code></pre>
  
  <p>I am using mobile emulation in a Chrome browser of iPhone 5. And the text for some of these drop down selections appears cut off once selected. </p>
  
  <p>For example using a iPhone 5 emulation. If I select <strong>Does not meet minimum qualifications</strong> from the dropdown list. What is actually visible is "<strong>Does not meet minimum qualific</strong>". 
  <em>Depending on which mobile emulation I use, more or less text is cut off.</em> </p>
  
  <p>I can select the selected element and check it as I have done below in my protractor test. </p>
  
  <pre><code>var el = element(by.model('selectedTransition.selectedReason')).$('option:checked');
  expect(el.getText()).toEqual('Cannot not meet pre-employment requirements');
  </code></pre>
  
  <p>But this is not not actually reading the visible text but instead is reading the element value which matches the expect statement and passes. How can I verify if the visible text is cut off? </p>