拉伸div作为最后的手段

Question

我正在尝试创建css来解决在页面标题旁边显示类似按钮的问题。我有3个案例。

• 标题适合类似按钮的左侧
• 标题很长，流向按钮左侧的多行
• 标题上有长字，溢出div并覆盖了类似按钮

我的问题：有没有办法设置div所以当案例3发生时，div增长并按下标题下面的类似按钮，但保留案例1和2的相同功能？

Answer 1

当单词导致溢出时，动态删除width。通过删除width，您可以使按钮向下移动，从而表现得像选项1和2。

使用一些jQuery / JavaScript动态检查这些div，以查看单词是否导致溢出。

//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。通过注释掉标记的行来注意行为的差异。 Note2分辨率和小提琴盒宽度很重要。[在FF7中测试演示]