title: CSS word wrap with floating elements
body: <p>I have a fixed-width sidebar consisting of a bootstrap <code>nav-list</code> where some list elements have right-aligned labels.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;li&gt;
    &lt;a href="#"&gt;abc_test_randomrandom&lt;/a&gt;
    &lt;span class="pull-right label"&gt;0000&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>I've put up a <a href="http://jsfiddle.net/rouge8/gw54T/">jsFiddle demo</a> to demonstrate this behavior. <strong>EDIT:</strong> And now a <a href="https://gist.github.com/4685571">gist</a> too.</p>
  
  <p>The desired behavior is <code>abc_test_randomrandom</code> and <code>0000</code> on the same line, with the long string wrapping to the next line if necessary. Is this possible?</p>