CSS - Make SPAN extend to end of its container / fill empty space?

I have the following HTML layout for a website (powered by Network Solutions nsCommerceSpace) I am designing a theme for:

<div id="ctl00_breadcrumb" class="breadcrumb">
   <span id="ctl00_breadcrumbContent">
      <span><a href="/">[Name of Webstore]</a></span>
      <span>&nbsp;&gt;&nbsp;</span>
      <span><a href="/page.aspx">Page</a></span>
      <span>&nbsp;&gt;&nbsp;</span>
      <span>Here is a very long title of a product that is causing me much frustration because it jumps out of place.</span>
   </span>
</div>

The span tags with <span>&nbsp;&gt;&nbsp;</span> in them are automatically generated to separate each item.

Here is a Fiddle of my problem: http://jsfiddle.net/5fvmJ/

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 overflow: hidden; to hide the extra text.

Any ideas? I know having all SPAN's makes this tough, but it's built-in functionality of the site that I cannot change.