title: Wrap selected text with Select2
body: <p>How can I get the selected text in <a href="https://select2.github.io/" rel="noreferrer">Select2</a> to wrap instead of using an ellipsis?  The option items wrap, but I'd like the input field to be able to expand down instead of over.</p>
  
  <p><strong>Here's an example</strong>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.select2').select2();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"&gt;&lt;/script&gt;
  
  &lt;select class="select2" style="width:100px"&gt;
    &lt;option value="AL"&gt;Really long name that normally wouldn't be visible&lt;/option&gt;
    &lt;option value="AK"&gt;Alaska&lt;/option&gt;
    &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>By default <a href="https://github.com/select2/select2/blob/master/src/scss/_single.scss" rel="noreferrer">Select2 adds the following code</a>:</p>
  
  <pre class="lang-css prettyprint-override"><code>.select2-selection--single {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  </code></pre>
  
  <p>However, removing these properties doesn't do the trick because they are still nested in other containers.</p>