Geek asks and answers

Forcing text left in div

I have a page palette showing in a div (25px high by 700px wide). I have so many pages that the page names in the palette splash out of the div. Is there a way that the last few pages of breadcrumbs make the first pages of cartridges go out of view and compare the last ones set in the Div

Hope this makes sense

Hi

R

+3
source share
4 answers

Yes, you can use overflow, floatand 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 make the links stay on one line and hide any overflowing text on the left so that the latest categories are displayed. float:leftstops breadcrumbs starting from the right edge.

+6

Chrome; heck , IE , :

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/

+2

,

+1

You can try to overflow: hiddenhide the content outside the size of the div so that it does not break the design.

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

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

+1
source

More articles:


All Articles