0

左にフロートされたスパンと右にフロートされたスパンの間にある省略記号テキスト (.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;
}
4

1 に答える 1

1

あなたが提供したサンプルhtmlを使用して、フィドルをセットアップしました。.title 要素を display ブロックに設定すると、楕円が表示されます。

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;
}
于 2013-04-24T01:38:07.933 に答える