text-wrap : none 및 text-overflow : 둘다 무시되는 타원

Question

text-wrap : none을 추가 했음에도 불구하고 텍스트가 한 줄에 너무 크게 표시되는 경우 텍스트를 잘라내기를 원합니다. overflow (오버플로) : 흘러 넘침이 둘 이상의 줄에 표시되고 잘리지 않습니다.

<snip> 

<ul> 
<li> 
<img = ...> 
<div id = "track_title">text</div> 
</li> 
</ul> 

ul { 
    position:absolute: 
    list-style: none; 
    top:20px; 
    margin: 0px; 
    padding: 0px; 
} 

li { 
    position: relative; 
    background-image: url("track_row_unselected.png"); 
    display: block; 
    height: 80px; 
} 
#track_title { 
    position:absolute; 
    padding:0; 
    margin:0; 
    top: 5px; 
    left: 80px; 
    width: 180px; 
    font-size: 15px; 
    font-weight: bold; 
    text-wrap:none; 
    text-overflow: ellipsis; 
} 

Answer 1

text-wrap은 주요 브라우저에서 지원되지 않습니다. white-space: nowrap;을 사용해보세요. 또한 overflow: hidden;을 추가해야합니다. Here is a jsFiddle.