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

abc_test_randomrandom 0000

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

Accepted Answer

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;}
```

CSS word wrap with floating elements

Solution

Problem