javascript - 拉伸(stretch) div 作为最后的手段

Question

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

• 标题位于“点赞”按钮的左侧
• 标题很长，并在按钮左侧排成多行
• 标题包含长单词，溢出了 div 并覆盖了点赞按钮

我的问题:有没有办法设置 div，以便当情况 3 发生时，div 会增大并按下标题下方的“like”按钮，但对于情况 1 和 2 保持相同的功能？

Answer 1

当单词导致溢出时动态移除宽度。通过删除 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 分辨率和 fiddle 盒宽度很重要。[在 FF7 中测试的演示]