Hide long text with float right

Question

I have lists of data need to display like this

.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>

The problem is the second one, if the text is too long, it will push the number outside the bottom border. Any ideas how to hide long text so the number will stay at right and dont get push outside the border ?

I'm having trouble replicating this, personally. Seems to be working fine in [JSFiddle](https://jsfiddle.net/barLmu03/) regardless of text length. Can you provide some clarity? **EDIT:** Correction, for anyone who was confused like me. If the floating number is on the last line of the text, it is in fact pushed down. — Tyler Roper, Jan 23 '17 at 21:25
I see your example, however the number, for me, is not pushed below the border. I was able to replicate it by having the exact amount of words necessary to fill the space. Your issue is that **you have not included a `clear: both;`** after your `float`. — Tyler Roper, Jan 23 '17 at 21:27
https://jsfiddle.net/cafeasia3/Lboxddh9/3/ I think it depends on the amount of texts — Tom Kur, Jan 23 '17 at 21:32

john c. j. · Accepted Answer · 2017-01-23T21:38:28.987

You could try this:

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

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

Also, you should not use identical ids for multiple elements in a one page.

That's why, this would be correct, while your original markup is invalid.

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

Updated fiddle with class instead of multiple ids:

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

Hide long text with float right

1 Answers1