Force text over 2 lines with CSS - html

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/

Answer 2

Given that it seems you are willing to change your HTML, I would recommend you simply add <br> after the first name, instead of wrapping the last name in any other tags. This would be deemed best practice.
The HTML <br> Element (or HTML Line Break Element) produces a line
break in text
This will give more semantic HTML- without the need to adjust native element styling, or clutter your DOM with uneccessary nodes.
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
text-align: center
}
<div class="test">
<h1>Mike<br>S</h1>
</div>
<div class="test">
<h1>Mike<br>Smith</h1>
</div>
<div class="test">
<h1>Mike<br>Smiths</h1>
</div>

Answer 3

Use the word-spacing attribute to the child tag:
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
background-color: blue;
word-spacing: 100px;
}
<div class="test">
<h1>Mike S</h1>
</div>
<div class="test">
<h1>Mike Smith</h1>
</div>
<div class="test">
<h1>Mike Smiths</h1>
</div>

Answer 4

I don't see what you are asking, it seems like the jsfiddle is what you are asking here.
But you can always set width to 100% so it cover for the text, if you want all that text in the same div then put it all under one Div tag.

Answer 5

Is this what you want?
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
<div class="test">
<h1>Mike</h1>
<h1>S</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smith</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smiths</h1>
</div>