html - 为什么 text-overflow:ellipsis 在这里不起作用：

Question

我想使用下面的结构，但省略号不显示。怎么了？

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

要使省略号起作用overflow:hidden，需要将其应用于该元素white-space: nowrap;

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

JSFiddle