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

BoffinBrain · Accepted Answer · 2011-05-12T15:12:42.163

6

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.

edited May 12 '11 at 15:12

answered May 12 '11 at 11:21

BoffinBrain

6,337
6
33
59

I believe this is a big step towards the solution, and was about to give you +1, but I didn't manage to get in working in jsfiddle. Perhaps you want to have a look and see what is the missing piece? http://jsfiddle.net/zCwQD/1/ – Bazzz May 12 '11 at 14:51
OK, I managed to sort it out. http://jsfiddle.net/MQndr/2/ I will update the answer too. – BoffinBrain May 12 '11 at 15:10

score 2 · Answer 2 · answered May 12 '11 at 11:25

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/

Thanks works well in Firefox, but not in IE. Seems IE doesnt like the Float or White-space: nowrap. Any one know of a workaround? — Rifki, May 12 '11 at 12:30

score 1 · Answer 3 · edited Apr 07 '12 at 11:45

1

This is an example how I would do it

edited Apr 07 '12 at 11:45

Alex Lockwood

83,063
39
206
250

answered May 12 '11 at 11:24

Teneff

30,564
13
72
103

1

Nice approach, but not completely what the OP asked for. Remove link2 till 5 from your example and you will see that link 1 moved to the right of the breadcrumb. The OP wants link 1 to stay on the left when there is enough space. – Bazzz May 12 '11 at 14:55

score 1 · Answer 4 · edited Jun 24 '11 at 12:01

1

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

edited Jun 24 '11 at 12:01

Paul D. Waite

96,640
56
199
270

answered May 12 '11 at 11:25

Deepu S Nath

1,164
1
17
45

Forcing text left in a Div

4 Answers4

HTML

CSS