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

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