CSS solution for dynamic number of columns in a single row

Question

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 :'(

Ivan Topolcic · Accepted Answer · 2016-08-28 23:58:17Z

2

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

edited Aug 28, 2016 at 23:58

Ivan Topolcic

2,0541 gold badge12 silver badges8 bronze badges

answered Nov 21, 2013 at 13:17

SW4

71.5k20 gold badges137 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2983931 Over a year ago

that is pretty much it, however the code generates divs and spans... they have id's and stuff , is there a way to style them into <ul> and <li>? perhaps with something like :before and content?? (sorry if this is a bit naive, i've only been at this a week )

SW4 Over a year ago

Sure, sorry, my bad for replying quickly- I've updated the code jsfiddle.net/L8S9L/1

user2983931 Over a year ago

damn you are boss dude... your solutions looks so much like what i was trying... why the hell didnt mine work?!! :) thanks very much.

NoobEditor · Accepted Answer · 2013-11-21 13:21:00Z

0

simple add this CSS :

    div{width:100%}
   div > span {
                float:left;
                width:40px; //customise width as per your purpose, can be in %ge too!
                overflow:hidden;  //hides extra text
                white-space:nowrap  //avoid getting on new line
              }

fix width will give the area to limit to, hope this helps!! :)

edited Nov 21, 2013 at 13:21

answered Nov 21, 2013 at 13:09

NoobEditor

16k20 gold badges85 silver badges117 bronze badges

2 Comments

user2983931 Over a year ago

jsfiddle.net/43fu9 - am i missing something? (it wraps when you squash the window up)

NoobEditor Over a year ago

not sure what you are trying to say here....i thought (jsfiddle.net/logintomyk/43fu9/2) this is what you wanted!! :)

Collectives™ on Stack Overflow

CSS solution for dynamic number of columns in a single row

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related