title: CSS - Make SPAN extend to end of its container / fill empty space?
body: <p>I have the following HTML layout for a website (powered by Network Solutions nsCommerceSpace) I am designing a theme for:</p>
  
  <pre><code>&lt;div id="ctl00_breadcrumb" class="breadcrumb"&gt;
     &lt;span id="ctl00_breadcrumbContent"&gt;
        &lt;span&gt;&lt;a href="/"&gt;[Name of Webstore]&lt;/a&gt;&lt;/span&gt;
        &lt;span&gt;&amp;nbsp;&amp;gt;&amp;nbsp;&lt;/span&gt;
        &lt;span&gt;&lt;a href="/page.aspx"&gt;Page&lt;/a&gt;&lt;/span&gt;
        &lt;span&gt;&amp;nbsp;&amp;gt;&amp;nbsp;&lt;/span&gt;
        &lt;span&gt;Here is a very long title of a product that is causing me much frustration because it jumps out of place.&lt;/span&gt;
     &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The span tags with <code>&lt;span&gt;&amp;nbsp;&amp;gt;&amp;nbsp;&lt;/span&gt;</code> in them are automatically generated to separate each item.</p>
  
  <p>Here is a Fiddle of my problem: <a href="http://jsfiddle.net/5fvmJ/" rel="noreferrer">http://jsfiddle.net/5fvmJ/</a></p>
  
  <p>Is there a way I can make the last SPAN tag fill the empty space, and just end when it hits the right side? I would just use <code>overflow: hidden;</code> to hide the extra text.</p>
  
  <p>Any ideas? I know having all SPAN's makes this tough, but it's built-in functionality of the site that I cannot change.</p>