は、フロートと長いテキストを隠す右

Question

私はデータのリストが二番目は、テキストが長すぎる場合、それはプッシュします。この

.mycontent-bottom { 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
#float-right{ 
 
    float: right; 
 
}

<div class="mycontent-bottom"> 
 
    <a href="">Title</a> 
 
    <span id="float-right">50000</span> 
 
</div> 
 
<div class="mycontent-bottom"> 
 
    <a href="">lorem ipsum yang lazim digunakan adalah: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</a> 
 
    <span id="float-right">50000</span> 
 
</div>

問題のように表示する必要がある必要があり下の境界線の外側の番号。任意のアイデアは、長いテキストを隠す方法は、番号が右にとどまることはありませんし、国境の外にプッシュを取得しないでください？

Answer 1

あなたはこれを試みることができる：

https://jsfiddle.net/Lboxddh9/5/

.mycontent-bottom { 
    border-bottom: 1px solid #ccc; 
    display: inline-block; 
    width: 100%; 
} 
#float-right{ 
    float: right; 
} 

---

また、あなたは1ページ内の複数の要素に対して同じid Sを使用しないでください。

元のマークアップが無効なので、これが正しいでしょう。

<div class="mycontent-bottom"> 
    <a href="">Title</a> 
    <span class="float-right">...</span> 
</div> 
<div class="mycontent-bottom"> 
    <a href="">...</a> 
    <span class="float-right">...</span> 
</div> 

classの代わりに、複数のid秒でフィドルを更新：

https://jsfiddle.net/Lboxddh9/7/