Display li's across 100% of screen width, and allow for wrapping to next line

Display li's across 100% of screen width, and allow for wrapping to next line

So i'm trying to create some HTML/CSS that will allow for a row of li
elements to fill 100% of the width of a page. The content within each li
is dynamic so can be of variable width (normally one or two words). Each
li section needs to also be the width of the content, not equal.
I'm currently using display:table and display:table-cell to do this which
can be seen in the jsFiddle.
ul {
list-style:none;
padding:0;
margin:0;
display:table;
width:100%;
text-align:center;
}
ul li {
display:table-cell;
}
http://jsfiddle.net/fHL7y/3/
However when the width of the page is changed (drag the bar over on
jsFiddle) the items bunch up and go off screen. Is there anyway using CSS
that the li's can flow down onto the next line below, like they would if
they were floated left but still be spaced out within 100% of the screen
width?