title: Change select width to fit div container
body: <p>I have defined a dropdwon as fellow:</p>
  
  <pre><code>    &lt;div class="form-group"&gt;
          &lt;select class="form-control"&gt;
              &lt;option&gt;small option&lt;/option&gt;
              &lt;option&gt;mediummmmmmmmmmmmmmmmmmmm option&lt;/option&gt;                
              &lt;option&gt;large eeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeee eeeeeeeeeeeee eeee option&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I want to change <code>select</code> width to be minimum of container width and <code>option</code> text width. If <code>option</code> text is bigger than <code>div</code> container, truncate  option's text and put ellipsis at the end. So the <code>option</code> stays inside the container. Also <code>select</code> must be responsive, When resizing window, <code>select</code> width should be updated to fit new window width.</p>
  
  <p>How can I achieve that using bootstrap CSS? </p>