为什么文本溢出:省略号在这里不起作用:

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

要使Ellipsis工作,overflow:hidden需要同时应用于THAT元素white-space: nowrap;

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

的jsfiddle