Question

I am using javascript to append a sequence of child items to an empty root DOM element.

The child items are in pairs, a 16×16 image and then some text.

Right now I am not doing anything special with css:

css for empty root element

.breadcrumb-cls {
    text-align : left;
 }

css for img element of pair

.breadcrumb-cls img {
    position : relative;
    top : 3px;
}

css for text element of pair

.breadcrumb-cls .breadcrumb-item-cls {
    font:bold 13px arial,tahoma, helvetica, sans-serif;
}

The problem is that if there are a long sequence of breadcrumb pairs, the line wraps relative to the “panel” in which it is contained.

Instead, I want a design whereby the items are side-by-side from left to right on one line, but when the horizontal width of the containing panel is exhausted, the items don’t wrap. The problem is that with a lot of pairs, you can pixels from the top of the second line, and it looks really bad.

I don’t want to try to calculate the expected length of the line based on the items involved to programmatically limit what gets appended to the root element. That is, I hope for a solution whereby no matter how many items are appended, the line of left-to-right items does not wrap.

Andy

Answer 1

I think what you want is:

.breadcrumb-cls {
    text-align : left;
    white-space: nowrap;
 }