Text/ Structure breaking when resize the browser - html

Question

I have following structure: JSFiddle Demo
HTML & CSS Code is as following:
HTML:
<ul>
<li class="test"> Hello </li>
<li class="test"> Welcome </li>
<li class="test"> Test Process </li>
<li class="test"> Text Message </li>
</ul>
CSS
ul{
width: 100%;
}
.test{
height:20px;
width:20%;
border: 1px solid black;
border-radius: 3px;
display: inline-block;
float: left;
margin-left: 5px;
text-align: center;
}
When I resize the browser the <li> tag widget structure is working fine (Not breaking) but the text inside the widget are breaking like:
My question is How can I make the text inside the widget adjustable so that It will not break.
Is there any way to fix this using only CSS ?

Answer 1

Provide
min-width:20%;
instead of
width:20%;
It should work..
Fiddle: http://jsfiddle.net/ZZa8j/2/

Answer 2

If you want it to expand accordingly, you can simply remove the explicit height and set a min-height like this.
If you want to clip the text and indicate the user that text is clipped, you can use the text-oveflow property like this.
.test{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
/*other styles*/
}
If you actually want the content to expand as much as possible and scoll if not, you could use Paulie_D's table-cell approach like he mentioned in comments.

Answer 3

Your images are blocked by my proxy so I'm not sure if it's the answer that you need, but you can avoid break between 2 words with the css property white-space.
white-space:nowrap;
see fiddle : http://jsfiddle.net/ZZa8j/4/

Answer 4

add min-width:450px; to the <ul>.
check my Fiddle Demo
CSS
ul{
min-width:450px;
width: 100%;
}
.test{
height:20px;
width:20%;
border: 1px solid black;
border-radius: 3px;
display: inline-block;
float: left;
margin-left: 5px;
text-align: center;
}
HTML
<ul>
<li class="test"> Hello </li>
<li class="test"> Welcome </li>
<li class="test"> Test Process </li>
<li class="test"> Text Message </li>
</ul>

Answer 5

Result
Code Demo
Try :
overflow: hidden;
min-width:100px;