html - text-overflow:ellipsis がここで機能しないのはなぜですか:

Question

以下の構造を使用したいのですが、楕円が表示されません。どうしたの？

jsフィドル

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;
}