CODEWITHSUNDEEP
csshtml
abruzzi
abruzzi

Reputation: 81

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:

<div class="breadcrumb">
    <span>Home</span>
    <span>Section</span>
    <span>Subsection</span>
    <span class="last">current page</span>
</div>

I need a couple of things to happen, that I cant figure out. All but the last <div> should size horizontally based on size of the text in the <span>.Since the final formatting of the bread crumbs will look like a distinct section, the <span class="last"> needs to fill the remaining space from the end of the previous span to the end of enclosing section.

If the enclosing view width (max-width of 960px, but sometimes smaller) is too narrow to see everything, the last dive should get smaller and smaller and truncate the text within it (instead of wrapping the itself) using something like text-overflow: ellipsis;.

In other words:

|[home][Agendas][Animal Service Center][12/23/2012: ASCMV Meeting Agenda     ]|

As the window shrinks, becomes:

|[home][Agendas][Animal Service Center][12/23/2012: ASCMV Meeting Agenda]|

Which further becomes:

|[home][Agendas][Animal Service Center][12/23/2012: ASCMV Me...]|

Is this doable with CSS? The stuff I played with I couldn't make work.

Upvotes: 4

Views: 1438

Answers (2)

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

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 :)

Upvotes: 1

Faust
Faust

Reputation: 15404

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/

Upvotes: 0

Related Questions