如何检测css浮动项是否溢出到下一行？

Question

当你使用float：left或float：right时，你怎么知道一条线何时溢出到下一行？例如，我希望一组项目从底部的屏幕左侧流向右侧，但当该行溢出到下一行时，只需隐藏它。有没有办法知道浮动项在哪一点溢出到下一行？

Answer 1

我打算使用jQuery做这样的事情：

$("#container").resize(function(){
    var totalwidth = 0;
    $(".floatable").each(function(index){
        totalwidth += $(this).outerWidth();
    });
    if(totalwidth > $("#container").width()){
        // YOUR MANIP CODE HERE
    }
});

$ .resize（）会在某些浏览器的重绘步骤中触发，因此您可能需要在此处放置250毫秒的延迟。

Answer 2

实际上没有办法检测到这种情况，但你可以给页脚容器一个固定的高度，并将它的overflow属性设置为隐藏。

Answer 3

要看的一种方法是

• 根据浮动订单
收集项目
• 计算总宽度
• 与父母比较，看看它是否更大。