title: CSS to display only part of the <select> or drop down list
body: <p>I have the following drop down list:</p>
  
  <pre><code>&lt;select&gt;
     &lt;option value="+1"&gt;+1&lt;/option&gt;
     &lt;option value="+93"&gt;Afghanistan (+93)&lt;/option&gt;
     &lt;option value="+355"&gt;Albania (+355)&lt;/option&gt;
     &lt;option value="+213"&gt;Algeria (+213)&lt;/option&gt;
     &lt;option value="+1"&gt;American Samoa (+1)&lt;/option&gt;
     ...
  &lt;/select&gt;
  </code></pre>
  
  <p>However, space is limited to me; I can't display the entire name of the country. I want to display what's relevant to the user once selected. So I opted to display only the country code by rearranging the option's text and the country to the following:</p>
  
  <pre><code>&lt;select style="width: 60px;"&gt;
      &lt;option value="+1"&gt;+1&lt;/option&gt;
      &lt;option value="+93"&gt;+93 - Afghanistan&lt;/option&gt;
      &lt;option value="+355"&gt;+355 - Albania&lt;/option&gt;
      &lt;option value="+213"&gt;+213 - Algeria&lt;/option&gt;
      &lt;option value="+1"&gt;+1 - American Samoa&lt;/option&gt;
      ...
  &lt;/select&gt;
  </code></pre>
  
  <p>And by setting a width on the select. However, the problem is... I have just lost usability. Now the user can no longer use the keyboard to type the name of his country and quickly jump to it.</p>
  
  <p>So, how can I solve this, without javascript? Can I rearrange the select list to the previous list and clip it with CSS to display the last portion of the option?</p>