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

I think Praveen’s solution is actually a better implementation, but to get the behavior originally requested, display: inline-block, word-wrap: break-word and setting the width fixes it.

li a {width: 70%; display: inline-block; word-wrap: break-word;}