Question

我遇到了在左侧浮动的跨度和向右浮动的跨度之间找到省略号文本（.title）的问题。当溢出发生时。将长度向下推到一个新行。我该如何解决这个问题？

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;
}

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

1 个答案: