Any way to determine if an item is complete?

Question

Basically, I have a specific HTML element (in this case a div) that wraps on a new line in the case of lower than the average screen resolution due to the floating element. I want to control this behavior, place and / or style the element differently if it is currently wrapped or will be wrapped when resizing / onload.

Is it possible?

Answer 1

You can count the number of text rectangles it uses with element.getClientRects() , which returns a ClientRect object for each border element of the element.This should be done on an inline element such as a <span> for each line of text to have its own border box, but it is simple enough to use:

 window.onresize = function () { var span = document.getElementById("myDiv").getElementsByTagName("span")[0], rect = span.getClientRects(); if (rect.length > 1) // more than 1 line of text doSomethingWithElement(span.parentNode); }