user2983931 user2983931 - 3 months ago 20
CSS Question

CSS solution for dynamic number of columns in a single row

i've been struggling all day with this...

i'm try to skin an existing control with CSS, for reasons of product QA, i dont want to edit the code that generates the tabs.

the control is a tabs control that is dynamically generated HTML...

i want all the tabs in a single row... which is fine... but when it reaches the edge of the container... i want all the child tabs to squash up and hide or ellipsis any text over flow.

what i've got -

----------------------------------------
|tab1 |tab2 |tab |tab <- container edge with tab 4 hidden.


what i want -

|tab1 |tab2 |tab 3 |tab 4 |tab x |


or -

|ta...|ta...|ta...|ta...|ta...|ta...|ta... you get the idea...?


the html is spans in a div... like snakes on a plane...

<div>
<span>tab1</span>
<span>tab2</span>
...
<span>tabx</span>
</div>


any hope?

thanks

edit: gotta work in IE7 :'(

SW4 SW4
Answer

Have a look at this fiddle- it should solve everything you've asked for

HTML

<div>
   <span>tab1</span>
   <span>tab2</span>
   <span>tabx</span>
</div>

CSS

 div {
    display: table;
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}
span {
    border: 1px solid grey;
    padding: 0 20;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: table-cell;
}
Comments