title: How to enable word wrapping in dropdown list options in HTML for mobile?
body: <p>I have one dropdown list which is created in HTML, that contain several options. That dropdown list has option which are very lengthy. So when I try to see that dropdown list in mobile, the option gets truncated. So How can I make them wrapped into next line?</p>
  
  <p>Below is my code:</p>
  
  <pre><code>&lt;select id="secretques" name="secretques" class="wide100"&gt;
                    &lt;option value=""&gt;-----------------SELECT-----------&lt;/option&gt;
                    &lt;option value="A1"&gt;What was the first concert you attended?&lt;/option&gt;
                    &lt;option value="A2"&gt;What was the name of your first pet?&lt;/option&gt;
                    &lt;option value="A3"&gt;What street did you live on in third grade?&lt;/option&gt;
                    &lt;option value="A4"&gt;What school did you attend when 10 years old?&lt;/option&gt;
                    &lt;option value="A5"&gt;What was last name of your first grade teacher?&lt;/option&gt;
                    &lt;option value="A6"&gt;What is the name of city where your parents met?&lt;/option&gt;
                    &lt;option value="A7"&gt;What is your maternal grandmother's maiden name?&lt;/option&gt;
                    &lt;option value="B1&gt;(BUSINESS CUST ONLY) WHAT IS YOUR SECRET CODE?&lt;/option&gt;
                    &lt;option value="Q1"&gt;What is your favorite food or drink?&lt;/option&gt;
                    &lt;option value="Q2"&gt;Who was your favorite teacher?&lt;/option&gt;
                    &lt;option value="Q3"&gt;What is the name of your favorite restaurant?&lt;/option&gt;
                    &lt;option value="Q4"&gt;What was the name of your childhood pet?&lt;/option&gt;
                    &lt;option value="Q5"&gt;What is your favorite sport or hobby?&lt;/option&gt;
                    &lt;option value="Q6"&gt;Where was your mother born?&lt;/option&gt;
                    &lt;option value="Q7"&gt;What was the name of the 1st school you went to?&lt;/option&gt;
     &lt;/select&gt;
  </code></pre>
  
  <p>Below is screenshot of what it is looking like:</p>
  
  <p>Dropdown List<br><br>
  <img src="https://i.stack.imgur.com/VtOYk.png" alt="Dropdown List"></p>
  
  <p>Any help will be appreciated...</p>
  
  <hr>
  
  <p>Edit:1 As suggested in comment I tried using select2 plugin.</p>
  
  <p>I have downloaded "select2-4.0.3" package from github.
  And imported CSS file select2.css (select2-4.0.3\select2-4.0.3\dist\css\select2.css) in my project. </p>
  
  <p>Also I have imported JS file select2.js (\select2-4.0.3\select2-4.0.3\dist\js) too.
  Then I put below code in my javascript file:</p>
  
  <pre><code>$(function() {
      $('.select2').select2({
          dropdownAutoWidth: true
      });
  });
  </code></pre>
  
  <p>Also I added "select2" class in my dropdown (html file) like below:</p>
  
  <pre><code>&lt;select id="secretques" name="secretques" class="wide100 select2"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>But none of css class of select2 is rendering. Could someone tell me why its not working with me?</p>