兩個並排，一個橢圓

說我有一個單獨的div包含歌曲標題和歌曲的長度（均爲span's）。如果兩個span都位於容器的邊界內，我希望標題完整顯示，但如果標題太長，我希望標題被橢圓化，歌曲長度不變。此外，歌曲長度應該始終位於標題的右側 - 不會飄到容器的最右側角落。兩個並排，一個橢圓

+-------------------+ 
+ a song 4:30  | 
+-------------------+ 
+ another s... 4:30 | 
+-------------------+

我發現了很多類似於我正在尋找的例子 - 但在每種情況下，似乎有所不同，從我需要的東西。這裏是我需要的一個近似值 - 除了在這JSFiddle的長度是在最右邊的角落 - 而我需要它在標題的右邊：http://jsfiddle.net/gyaMf/

我不一定知道「歌曲長度」的寬度，，但如果它更容易，我們可以假設它是一些預設寬度。

來源

2013-10-09 Melllvar

不是真的確定要實現什麼，而是你可以使用'顯示：內聯block'使'span's彼此旁邊， [示例]（http://jsfiddle.net/gyaMf/3/）。 – Vucko

感謝您的建議大家，但需要沒有解決方案的工作。我能得到一個理想的解決方案，但並非沒有jQuery的：

var len = $title.outerWidth() + $length.outerWidth() + 14; 
var available = $container.width() - $title.offset().left; 

$container.toggleClass('too-long', len >= available);

我使用jQuery來計算這兩個範圍的總長度;如果沒有足夠的空間來容納兩者，則將too-long CSS類添加到容器。（「14」是一個稍微隨意的數字，考慮到文本的大小以及在容器確定內容溢出時它是如何被橢圓化的，似乎工作得很好）。

沒有too-long，兩個跨度都呈現爲內聯。隨着too-long：

.too-long { 
    padding-right: 3.5em; 
} 

.too-long .length { 
    position: absolute; 
    right: 2em; 
}

由於容器具有position: relative，這導致了預期的效果 - 長度標題流動，但「大棒」到容器的右邊緣時不再有任何可用空間。不利的一面是，每當標題或長度發生變化時，too-long都必須重新評估，但是當發生這種情況時，我已經做了各種其他CSS調整，所以它沒有那麼多額外的工作。

來源

2013-10-15 04:50:00 Melllvar

您可以使用:after僞元素和attr內容的組合輕鬆實現此目的。

jsFiddle here

HTML

<div class="song"> 
<span len="4:31" class="title">This is the song</span> 
</div> 

<div class="song"> 
<span len="4:31" class="title">This is the</span> 
</div> 

<div class="song"> 
<span len="4:31" class="title">This</span> 
</div> 

<div class="song"> 
<span len="4:31" class="title">This is the song titlee </span> 
</div>

CSS

.song { 
    font-size: 14px; 
    width:160px; 
    position:relative; 
    border:1px solid black; 
} 
.title { 
    white-space: nowrap; 
    width:100px; 
    display:block; 
    overflow: hidden; 
    text-overflow:ellipsis; 
} 
.title:after { 
    content:attr(len); 
    padding-left:5px; 
    display:inline-block; 
    position:absolute; 
}

來源

2013-10-09 15:56:33

現在你可以使用Flexbox的： http://jsbin.com/rojam/3

container { 
    display: flex; 
    flex-direction: row 
    flex-wrap: nowarp; 
    justify-content: space-between; 
    align-items: baseline; 
    align-content: center; 
} 

span.name { 
    white-space: nowrap;     
    overflow: hidden; 
    text-overflow: ellipsis; 
    flex-grow: 0; 
    flex-shrink: 1; 
} 

span.len { 
    flex-grow: 1; 
    flex-shrink: 0; 
}

來源

2014-12-17 21:29:25

兩個並排，一個橢圓

回答

相關問題