CODEWITHSUNDEEP
csswidth
Rápli András
Rápli András

Reputation: 3923

CSS semi-dynamic width

I have some keywords that show up in separate inline-block elements with 10%(=80px) width. Currently I am setting overflow:hidden; for longer words, but it's not a good practice. I want that if some of these keywords are longer than usual, their parent div (the one with currently 10% width applied to) should be twice its size: 160px. I wonder if this can be solved with CSS3 only.

I'll try to explain it visually:

+__80px__+__80px__+__80px__+

+__text__+

+__longer text____+

+______way longer text_____+

instead of

+overflow hi+ or +random width to fit text+

If the text does not fit in 80px, its container should be 160px. That simple. Please help me.

Upvotes: 0

Views: 56

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324600

I can't think of any way to do this in CSS, but with a little JavaScript magic you can make it work:

// assuming all elements are in a container with id="container"...
var qsa = document.getElementById('container').children, l = qsa.length, i;
for( i=0; i<l; i++) {
    if( qsa[i].scrollWidth > 240) {
        // this one handles REALLY long text by cutting them off with "..."
        qsa[i].style.textOverflow = "ellipsis";
        qsa[i].style.whiteSpace = "nowrap";
    }
    if( qsa[i].scrollWidth > 160) qsa[i].style.width = "240px";
    else if( qsa[i].scrollWidth > 80) qsa[i].style.width = "160px";
    // else do nothing, leave the deafult 80 width
}

Upvotes: 1

Related Questions