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

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/