css - text-wrap: none 和 text-overflow:ellipses 都被忽略

Question

如果我的文本太大而不能放在一行上，我希望我的文本被截断，但是即使我添加了 text-wrap:none 和 text-overflow:ellipes 它溢出到多行而不被截断。

<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;. 这是一个 jsFiddle。