html - 如何检测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

一种查看方法是

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

Answer 3

实际上没有办法检测到这一点，但您可以给页脚容器一个固定的高度并将其溢出属性设置为隐藏。