title: How to display multiple spaces in HTML select list <option></option>
body: <p>jsfidder here <a href="http://jsfiddle.net/a3LwW/4/" rel="noreferrer">http://jsfiddle.net/a3LwW/4/</a></p>
  
  <p>My problem is I have multiple spaces in the content of <code>&lt;option&gt;</code></p>
  
  <p>jQuery <code>val()</code> gives me correct value, but browser renders the <code>&lt;option&gt;</code> as if there is only a single space in the string.</p>
  
  <p>Is there a way to to render multiple spaces correctly in <code>&lt;option&gt;</code>??</p>
  
  <p>I tried <code>&lt;option&gt;&lt;pre&gt;three   spaces&lt;/pre&gt;&lt;/option&gt;</code>, but it doesn't do what I want.</p>
  
  <p><img src="https://i.stack.imgur.com/ABS13.png" alt="spaces in select option"></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select id="list"&gt;
      &lt;option&gt;one space&lt;/option&gt;
      &lt;option&gt;two  spaces&lt;/option&gt;
      &lt;option&gt;three   spaces&lt;/option&gt;
  &lt;/select&gt;
  &lt;p&gt;Current Value:&lt;pre id="val"&gt;&lt;/pre&gt;&lt;/p&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function update_val () {
      $('#val').text($('#list').val()); 
  }
  
  $('#list').change(update_val);
  
  //init
  update_val();
  </code></pre>