title: Force text over 2 lines with CSS
body: <p>I'd like to have all surnames on the second line AND maintain the exact same width for <code>test</code> div. What is the best way of achieving this with CSS?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="test"&gt;
      &lt;h1&gt;Mike S&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="test"&gt;
      &lt;h1&gt;Mike Smith&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="test"&gt;
      &lt;h1&gt;Mike Smiths&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.test {width:25%;float:left;background:red;margin-right:20px}
  h1 {text-align:center}
  </code></pre>
  
  <p><a href="http://jsfiddle.net/zcg9k5xh/" rel="noreferrer">http://jsfiddle.net/zcg9k5xh/</a></p>