Forcing text left in a Div

Question

I have a breadcrumb pages showing in a div.( 25px high by 700px wide) The trouble is I have so many pages that the page titles in the breadcrumb are spilling out of the div. Is there a way for the last few breadcrumbs pages to force the first breadcrumb pages left out of sight and diplay the last ones fitted in the Div

Hope this makes sense

Regards

R

Answer 1

Yes, you can use overflow, float and white-space.

HTML:

<div class="breadcrumb-container">
    <div class="breadcrumb">
    Start aaaa aaaa End
    </div>
</div>
<div class="breadcrumb-container">
    <div class="breadcrumb">
    Start aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa End
    </div>
</div>

CSS:

.breadcrumb-container {
    float:left; max-width:100%; margin:5px; overflow-x:hidden; background:orange;
}
.breadcrumb {
    float:right; margin:5px; white-space:nowrap; background:cyan;
}

This will force the links to stay on a single line and hide any overflowing text off the left hand side, so the last categories are visible. The float:left stops the breadcrumbs from starting from the right margin.

Answer 2

This seems to work in Chrome; heck knows what earlier versions of IE will make of it though:

HTML

<div class="breadcrumb-container">
<ul class="breadcrumb">
    <li>1 breadcrumb item</li>
    <li>2 breadcrumb item</li>
    ...
    <li>10 breadcrumb item</li>
</ul>
</div>

CSS

.breadcrumb-container {
    float: left;
    max-width: 100%;
}

.breadcrumb-container .breadcrumb {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.breadcrumb-container .breadcrumb li {
    display: inline;
}

http://jsfiddle.net/Bu4J5/2/