overflow - 文本溢出省略号，在浮动的左侧跨度和浮动的右侧跨度之间

Question

我在向左浮动的跨度和向右浮动的跨度之间发现省略号文本 (.title) 时遇到问题。当溢出发生时，.length 被下推到新的一行。我怎样才能解决这个问题？

JS 小提琴：http: //jsfiddle.net/VfHdS/6/

HTML：

<div class="song">
<span class="tracknumber">4</span>
<div class="title">This is the song tittle!!!!!!!!!!!</div>
<span class="length">4:31</span>
</div>

CSS：

.song {
    font-size: 14px;
    padding: 2px 20px;
}
.tracknumber {
    margin-right: 10px;
}
.title {
    color: #262626;
    display:inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.length {
    float: right;
}

Answer 1

使用您提供的示例 html，我设置了一个小提琴。将 .title 元素设置为显示块是使省略号显示的原因。

http://jsfiddle.net/f4uUJ/

我还完全重新定位了曲目编号和播放时间，因此歌曲标题可以是 100% 宽度。您只需要在轨道上添加填充，就可以给标题一些喘息的空间。

CSS

.song {
     font-size: 14px;
     padding: 2px 40px 2px 20px;
     position:relative;
}
.tracknumber {
     position:absolute;
     left:0;
     top:2px;
}
.title {
     white-space: nowrap;
     width: 100%;
     display:block;
     overflow: hidden;
     text-overflow:ellipsis;
}
.length {
     position:absolute; 
     right:0;
     top:2px;
}