title: HTML Dropdown (select) with Text Wrap and Border after every value (option)
body: <p>I am trying to achieve two things with DropDown. </p>
  
  <ul>
  <li>First I want to Wrap the text in the list of options within a dropdown. </li>
  <li>Second, I want to put a border after every option</li>
  </ul>
  
  <p>and I want to support IE (and other browsers too).</p>
  
  <p>This is because I would have long text in the dropdown and I don't wish to cut them. For that reason, I want to do the aforementioned things.</p>
  
  <p>Something like this:-</p>
  
  <p><a href="http://jsfiddle.net/fnagel/GXtpC/embedded/result/" rel="noreferrer">http://jsfiddle.net/fnagel/GXtpC/embedded/result/</a></p>
  
  <blockquote>
    <p>select the one with "Same with option text formatting, Select an
    Address". Notice how the options are formatted and have a
    border-bottom with each of them.</p>
  </blockquote>
  
  <p>Here is what I tried (Text):-</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.myselect {
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .myselect option {
    white-space: nowrap;
    width: 100% border-bottom: 1px #ccc solid;
    /* This doesn't work. */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select name="d" class="myselect"&gt;
    &lt;option value="sdf" class="test1"&gt; line text How to wrap the big line text &lt;/option&gt;
    &lt;option value="sdf2" class="test1"&gt; line text How to wrap the big line text &lt;/option&gt;
    &lt;option value="sdf3" class="test1"&gt; line text How to wrap the big line text &lt;/option&gt;
    &lt;option value="sdf4" class="test1"&gt; line text How to wrap the big line text &lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>