text-overflow elipsis가 작동하지 않습니까?

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

노력과 같이, 당신의 .folder-box-title에 overflow:hidden 또는 overflow:auto 추가는 : http://jsfiddle.net/cWDtM/ 여기

더 :

1. 상자가 오버 플로우를 가지고 : http://quirksmode.org/css/user-interface/textoverflow.html

   텍스트 오버 플로우는 활동하기 시작 보이지 않는 것 (오버 플로우가 있음 : 텍스트가 단순히 상자 밖으로 나옵니다.)

2. 상자에는 공백이 있습니다 : nowrap 또는 비슷한 방식으로 텍스트가 배치되는 방식을 제한합니다. 텍스트 overflow 컨테이너를 못하게 또한 당신은 텍스트가 포함 된 div의 width을 지정해야

Answer 2

(이없이 텍스트가 다음 줄로 줄 바꿈 것)합니다.

width:150px; 
overflow:hidden; 

데모 : http://jsfiddle.net/vxghC/6/