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

Question

我在遇到左浮动跨度和右浮动跨度之间存在省略号文本（.title）时遇到问题。发生溢出时，将长度下推至新行。我怎样才能解决这个问题？

JS FIDDLE： 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; 
}