CSS word wrap with floating elements

Question

I have a fixed-width sidebar consisting of a bootstrap nav-list where some list elements have right-aligned labels.

For example:

<li>
  <a href="#">abc_test_randomrandom</a>
  <span class="pull-right label">0000</span>
</li>

However, this doesn't work if the link is long. It expands to fill the whole line, and pushes the label to the next line.

I've put up a jsFiddle demo to demonstrate this behavior. EDIT: And now a gist too.

The desired behavior is abc_test_randomrandom and 0000 on the same line, with the long string wrapping to the next line if necessary. Is this possible?

Answer 1

Yes. Use a fixed width and give overflow: hidden; for the excess with text-ellipsis.

li a {width: 60%; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap;}
li span {width: 40%; display: inline-block;}

I am unable to open jsFiddle. So couldn't see the exact issue.