css: how to have a variable column size with text overflow ellipsis


Tags: html,css,html5,css3

Problem :

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/



Solution :

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;
}

    CSS Howto..

    How to properly align icon and text in a table?

    How to Have the Div Aligned to the Middle, and That Relative to the Parent Div?

    How to get style of a div from javascript file

    How come the links in my footer section remain purple and underlined even when I use CSS to change that

    How to use Segoe Print font in CSS?

    How do I make a header above my navigation bar?

    How to make a big image not scroll?

    How can I disable my css sprite nav bars hover state for a section while it is active?

    How to keep an element fixed top within another element?

    How to set the maximum height of CSS images?

    How to Change background-color of .body when hover menu ( Jquery - Shopify )?

    How do I programmatically change the CSS link for HTML files in C#?

    How to scale down CSS background-image when using various background-positions?

    Customizing Clockdown.js to Show only Minutes and Seconds

    How do you associate a css/sass stylesheet to a view in rails?

    How to trigger a css animated button by hovering over an image on the same page

    How to access two Ids in one css selector

    Space between list, space on left side of the ul. How to remove this?

    How to add Button over image using CSS?

    How to actually center (vertical and horizontal) text inside a nested div

    Google Chrome Package Apps : How to make transparent rounded background like google hangout app?

    CSS+HTML: How to draw table/cell border

    I want to override some CSS that says border:none to have border bottom. How can I do this?

    How is font-size not working here?

    How to link another page using button? [closed]

    How can I create this complicated layout using only CSS?

    How can I select my font awesome icons in CSS?

    How to get use the functionality same as “-webkit-appearance” in firefox?

    How to place button row and content left to image in bootstrap or css

    How to write CSS code without using :not selector?