Why does text-overflow:ellipsis not work here:

Question

I'd like to use the structure below, but the ellipses don't show. What's wrong?

jsFiddle

HTML:

<div>
    <ul>
        <li>One two three four five six seven</li>
    </ul>   
</div>

CSS:

div {height:30px; overflow:hidden; background:#eee;}
ul {float:left; margin:0; padding:0;}
li
{
    float:left;
    height:28px; margin-left:4px;
    border:solid 1px #000;
    font: 10px/28px Arial; color:#333;
    padding:0 4px;
    width:100px;
    text-overflow:-moz-ellipsis;
    text-overflow:-webkit-ellipsis;
    text-overflow:ellipsis;
}

Answer 1

For Ellipsis to work overflow:hidden needs to be applied to THAT element together with white-space: nowrap;

li {
overflow:hidden;
white-space: nowrap;
}

JSFiddle