text-wrap: none и text-overflow: оба эллипса игнорируются

Я хочу, чтобы мой текст был усечен, если он слишком велик для размещения в одной строке, однако, несмотря на то, что я добавил text-wrap: none и text-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;
}