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

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:hiddenoroverflow:auto到你的.folder-box-title，像这样：http: //jsfiddle.net/cWDtM/

更多信息：http: //quirksmode.org/css/user-interface/textoverflow.html

文本溢出仅在以下情况下起作用：

1. 盒子有溢出而不是可见（溢出：可见文本只是从盒子里流出）
2. 该框具有 white-space: nowrap 或类似的限制文本布局方式的方法。（没有这个，文本将换行到下一行）

Answer 2

您必须为width包含文本的 div 指定 a ，并且不要让文本overflow成为容器。

width:150px;
overflow:hidden;

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