Force text over 2 lines with CSS

Question

I'd like to have all surnames on the second line AND maintain the exact same width for test div. What is the best way of achieving this with CSS?

HTML:

<div class="test">
    <h1>Mike S</h1>
</div>

<div class="test">
    <h1>Mike Smith</h1>
</div>

<div class="test">
    <h1>Mike Smiths</h1>
</div>

CSS:

.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}

http://jsfiddle.net/zcg9k5xh/

Answer 1

Update your code with this:

.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
h1 span{display: block;}

<div class="test">
    <h1>Mike <span>S</span></h1>
</div>

<div class="test">
    <h1>Mike <span>Smith</span></h1>
</div>

<div class="test">
    <h1>Mike <span>Smiths</span></h1>
</div>

You can also do this by using css, update above css

h1 span{display: list-item;list-style:none;}

jsfiddle with this http://jsfiddle.net/zcg9k5xh/2/