Floating Elements Without Wrapping (truncate Last Element)

I've seen many similar questions, but none that I can find seem to satisfy what I'm trying to do. I have some breadcrumbs on my site. Currently the HTML looks something like this

Solution 1:

Well I've been able to get it all in there except the ellipsis: demo here.

First of all I cleaned up your HTML like mad. Navigation elements like crumbtrails should be in a <nav> element in HTML, and a list of items in there is logically a <ul> like it should be everywhere. Further I stripped all classes not required, result being:

<nav id="crumbtrail">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Section</a></li>
        <li><a href="#">Subsection</a></li>
        <li><a href="#">current page</a></li>
    </ul>
</nav>

The CSS, well, can't recommend much more than diving in there and try to understand what I did:

nav {
    font-family:Tahoma,Arial,sans-serif;
    color:white;
    max-width:500px;
}
nav ul {
    background:url(http://wasimshaikh.com/demo/breadcrumbs/bcnav-current.png) no-repeat right;
    font-size:0;
    height:27px;
    line-height:27px;
    list-style:none;
    white-space:nowrap;
    overflow:hidden;
}
nav li {
    background:url(http://wasimshaikh.com/demo/breadcrumbs/bcnav-left.png) no-repeat left;
    font-size:10pt;
    height:27px;
    display:inline-block;
    position:relative;
}
nav li:after {
    content:url(http://wasimshaikh.com/demo/breadcrumbs/bcnav-right.png);
    position:absolute;
    z-index:5;
    top:0;
    right:-16px;
}
nav li a {
    color:white;
    display:block;
    height:100%;
    width:100%;
    padding:0 16px 0 32px;
    text-decoration:none;
}
nav li:first-child a {
    padding-left:16px;
}
nav li:last-child {
    background:none;
    border:0;
}
nav li:last-child:after {
    content:none;
}

As you can see from the result, it works. I tested it in Chrome latest beta, FF20, IE9 and IE10, all show identical results. Not a single line of Javascript was harmed in the making of this crumbtrail.

I've tried everything to get the ellipsis in there, but browsers are really picky about only allowing that on inline elements, and I can't get the styling done without using inline-block. So that's out of the game. You could theoretically patch some JS on there to do that though if it's REALLY important, but I think this works fine too.

Enjoy :)

Solution 2:

A pure-CSS approach would be to apply white-space:nowrap to breadcrumb, set the width of the .last element to something very long, and set the overflow property on breadcrumb to hidden:

Then, depending how you want the right-edge to look, you could add in a design-hook span inside of .last, position it absolutely with right:0px;, keeping the position on .last as static (default) so that the positioning grid is the outer container, then use this span to fake the right-edge of the last breadcrumb (if needed).

.breadcrumb{
    white-space:nowrap;position:relative
    background:lightblue;
    height:1.7em;line-height:1.5em;
    overflow:hidden;padding:3px;}
.breadcrumb > span{
    display:inline-block;background:#eee
    margin-right:3px;padding:1px 5px }
.last {width:2000px}
.last span{position:absolute;right:0px;
    background:lightblue;width:3px;
    top:-1px;bottom:-5px;}

See this example working here: http://jsfiddle.net/mhfaust/Mtc8g/2/