Span Misaligns when Text gets too Long

First, a couple of limitations:

1. I have a limited CSS vocabulary, so I would appreciate some schooling on that, and
2. The only thing I have the power to change is a global style sheet.

I have a list of links called a breadcrumb that looks like this:

![before](

)

Except when you increase the text size or number of sub elements, then it looks like this:

![after](

)

When I press F12 and view the HTML, it looks like this:

<div id="Breadcrumb">
<span id="dnn_dnnTEXT_lblText" class="Intro">You are here:</span>
<span id="dnn_dnnBreadcrumb_lblBreadCrumb">
<a class="SkinObject" href="https://www.c-ied.org/Projects.aspx">Projects</a>
<span class="Sep"></span>
<a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities.aspx">Capabilities</a>
<span class="Sep"></span>
<a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative.aspx">Maritime Initiative</a>
<span class="Sep"></span>
<a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative/MSC2012.aspx">MSC 2012</a>
<span class="Sep"></span>
<a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative/MSC2012/6June.aspx">6 June</a>
</span>
</div>

This is in a DotNetNuke CMS, so I can go in the Site Settings and mess with the Style Sheet Editor. Nothing I tried in there has had any effect, except `#dnn_dnnBreadcrumb_lblBreadCrumb {width: 100%}` which made it look even worse.

I've also taken the HTML above and placed it above some text blurbs I was adding in another module. There, it looks fine. Back to F12 again and the only lines in the TraceStyles that look different for the dnn_dnnBreadcrumb_lblBreadCrumb span were some crossed-out styles:

![F12 After](

)

whilst before it was:

![F12 Before](

)

So, this all has to be viewed in IE. Is there a CSS property I can use on some selector or another that will make this work?

It looks like the `font-size` for the breadcrumbs have been set to a specific pixel value. You will likely need to set the `line-height` to a specific pixel value as well.

(Although this is not ideal. The user should be able to increase the text-size.)

It's really hard to know without seeing the rest of your DOM, but it seems like the #dnn_dnnBreadcrumb_lblBreadCrumb is just being enlarged and no longer fitting into its container element (#Breadcrumb). Therefore it wraps.

I'd first try hacking it with something like this:

#Breadcrumb {
white-space: nowrap;
width: 100%;
}

Nasty as it is, you could try overflow:hidden on your container #Breadcrumb. While wrapping should then be prevented, you could lose long breadcrumbs to the hidden part of the container.

Another solution, measure the width of each breadcrumb item, and when it approaches the bounds of your container, truncate the contents for example by replacing intermediate items between 'you are here' and say the final two/three items with a single non-clickable ellipsis (...) item.
for example:

You Are Here: Projects > ... Msc 2012 >