Forcing text left in a Div

I have a breadcrumb pages showing in a div.( 25px high by 700px wi开发者_JAVA百科de) 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

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.

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/

You can try overflow: hidden to hide the content beyond the div size so that it will not break the design.

div
{
text-align:right;
width:700px;
height:25px;
overflow-x:hidden;
}

You can get more details about this at http://www.brunildo.org/test/Overflowxy2.html

This is an example how I would do it