JSFIDDLE:
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;
}
我做错了什么?
最佳答案
尝试将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:
- the box has overflow other than visible (with overflow: visible the text simply flows out of the box)
- 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)
关于css - 文本溢出省略号不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17660736/