文本溢出省略号不起作用？

Question

的jsfiddle：

http://jsfiddle.net/vxghC/4/

HTML：

<div class="study-box folder-box"> 
    <div class="folder-box-title"> 
     <div> TEST TEST TEST TEST TEST </div> 
    </div> 
</div> 

JS：

.folder-box-title > div { 
margin-left: 10px; 
margin-bottom: 7px; 
-ms-text-overflow: ellipsis !important; 
-o-text-overflow: ellipsis !important; 
text-overflow: ellipsis !important; 
white-space:nowrap; 
} 
.study-box { 
    width: 200px; 
    height: 120px; 
    margin: 2px; 
    color: white; 
    background-color: blue; 
    text-align: center; 
    font-size: 15px; 
} 

我在做什么错？

Answer 1

尝试增加overflow:hidden或overflow:auto您.folder-box-title，像这样：http://jsfiddle.net/cWDtM/

这里更多：http://quirksmode.org/css/user-interface/textoverflow.html

文本溢出进入，只有当游戏：

1. 盒具有溢出除了可见（溢出：可见 文本只是流出盒子）
2. 该框具有空格：nowrap或 一种约束文本布局方式的类似方法。 （没有这一点，该文本将换到下一行）

Answer 2

您必须指定包含文本的DIV一个width，也不要让文字overflow容器。

width:150px; 
overflow:hidden; 

演示： http://jsfiddle.net/vxghC/6/