Question

I am trying to create css to solve a problem with displaying a like button next to a page title. I have 3 cases.

• The title fits to the left of the like button
• The title is long and flows to multiple lines to the left of the button
• The title has long words that overflow the div and cover the like button

My question: Is there a way to set up the div so when case 3 happens, the div grows and pushes the like button below the title but keeps the same functionality for cases 1 and 2?

Answer 1

Dynamically remove the width when the word causes overflow. By removing width, you cause the button to move down and thus behave like options 1&2.

Check these divs dynamically with some jQuery/JavaScript to see if a word causes an overflow.

//Javascript function to remove width class when overflow occurs.
//40em is an arbitrary width
    $.each($('.ConstrainedDiv'),function() {
        var wordregex = /\w+/g;
        var content = $(this).html();
        var wordArray = content.match(wordregex );
        for(var i = 0; i < wordArray.length; i++) {
            if(wordArray[i].length > 40) {
                $(this).removeClass('someWidth');//behavior changes if you remove this
                break;
            }
        }
    });

Fiddle. Note the difference in behavior by commenting out the marked line. Note2 resolution and fiddle box width matter.[Demo tested in FF7]