Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

This is starting to drive me nuts, any help appreciated!

I would like to have each <li> that isn't "fixed" to have a maximum width of say 150px, and a minimum width of say 10px, however when the browser is resized down, they should shrink to fix (and be equal in width). I would also like the text within each non "fixed" <li> to have text-overflow: ellipsis.

I just can't seem to get this working, so far I have:

http://jsfiddle.net/546t8/

HTML:

<ul>
    <li class="fixed">Fixed Size</li>
    <li>
        <div>
            <span>this text is very very long and it goes on and on and on and on but does not wrap</span>
        </div>
    </li>
    <li><div>
            <span>short</span>
        </div></li>
    <li><div>
            <span>one more tab</span>
        </div></li>
    <li><div>
            <span>another tab</span>
        </div></li>
</ul>

CSS:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table;
    border-spacing: 6px 0px;
}

li {
    display: table-cell;
    background-color: red;
    width: 150px;

}

li > div {
     overflow: hidden;
    text-overflow: ellipsis;

}

li > div > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

li.fixed {
    width: 100px;
    min-width: 100px;
    text-align: center;
}

UPDATE: this shows what I'm after with the columns but as you can see the text isn't hidden with the ellipsis:

http://jsfiddle.net/546t8/9/

UPDATE: this is getting closer, but still no ellipsis :-(

http://jsfiddle.net/546t8/11/

UPDATE: SOLVED Solution posted below.

http://jsfiddle.net/AjZDx/2/

share|improve this question
Can the HTML structure be changed? – Vimal Stan May 5 at 12:40
@VimalStan yes, the html can be changed. – magritte May 5 at 12:42
what do you need the ellipse for? html will just break the text to fit into your li (once you remove white-space: nowrap;). Would you prefer hiding part of the text to breaking the text to go an several lines? – bjelli May 5 at 12:47
@bjelli yes, the requirement is that the text does not wrap, and hides to the right with the ellipsis when there isn't enough room. – magritte May 5 at 12:52
@magritte You're right, removed the answer. Will post one if I find the solution. – Vimal Stan May 5 at 13:23
show 1 more comment

2 Answers

up vote 0 down vote

I believe that display: table and display: table-cell are a dead end: table layout will always use the maximum cell height necessary to show all the content (see below) - but you need the opposite. On the other hand table layout is good for using the horizontal space in the way you describe.

A wholly different approach would be to use some javascript library to do the layouting for you. There's tons of those. some example:

p.s.

With float and simpler html you get the height but not the width you want:

<ul>
    <li class="fixed">Fixed Size</li>
    <li class="ellipsis">this text is very very long and it goes on and on and
on and on but does not wrap</li>
    <li>short</li>
    <li>one more tab</li>
    <li>another tab</li>
</ul>

and css

li {
    float:left;
    min-width: 10px;
}

li.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

li.fixed {
    width: 150px;
}

See this fiddle for a working example: http://jsfiddle.net/bjelline/TxDfc/

share|improve this answer
I need the columns to be equal in width (the ones that aren't fixed), hence the display:table, display:table-cell. Is there another way I could achieve that? cheers. – magritte May 5 at 14:39
cheers Bjelli, I have javascript solution that works (setting the width on the div's appears to kick the text-overflow:ellipsis into action), just thought it would be better if it's possible with pure css. – magritte May 5 at 15:56
up vote 0 down vote accepted

Finally got this to work... The solution was (no html change was required):

http://jsfiddle.net/AjZDx/2/

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table;
    border-spacing: 6px 0px;
}

li {
    display: table-cell;
    background-color: red;
    min-width: 20px;
    width: 120px;
}

li.fixed {
    width: 100px;
    min-width: 100px;
    text-align: center;
}

ul > li > div {
    display: table;
    border-spacing: 0px 0px;
    table-layout: fixed;
    width: 100%;
}

ul > li > div > span {
    display: table-cell;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.