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:hidden 或overflow:auto 添加到您的.folder-box-title，如下所示:http://jsfiddle.net/cWDtM/

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

text-overflow comes into play only when:

1. the box has overflow other than visible (with overflow: visible the text simply flows out of the box)
2. the box has white-space: nowrap or a similar method of constraining the way the text is laid out. (Without this, the text would wrap to the next line)