April 7, 2012
How to detect whether css floated items overflows to the next line?
Question by Vlad
When you use float:left or float:right, how do you know when a line has overflown to the next line? For example, I would like a collection of items to flow from left to right side of the screen at the bottom, but when the line overflows to the next line, just hide it. Is there a way to know at which point the float items overflows into the next line?
Answer by Starx
One way to look at would be to
- Collect the items as per the float Order
- Calculate the total width
- Compare against parent and see if its greater.
