javascript - Any way to determine if an element is wrapped? - Stack Overflow

admin管理员组

文章数量:1340773

Basically, I have a certain HTML element (in this case, a div) that is wrapping to a new line in the case of a below average screen resolution, due to a floating element. I want to control this behavior, placing and/or styling the element differently if indeed it is currently wrapped or will be wrapped upon resize/onload.

Is this possible?

Basically, I have a certain HTML element (in this case, a div) that is wrapping to a new line in the case of a below average screen resolution, due to a floating element. I want to control this behavior, placing and/or styling the element differently if indeed it is currently wrapped or will be wrapped upon resize/onload.

Is this possible?

• javascript
• html
• word-wrap

Share Improve this question Follow edited Mar 1, 2012 at 19:49 animuson♦ 54.8k2828 gold badges142142 silver badges150150 bronze badges asked Feb 1, 2011 at 13:49 Chris CashwellChris Cashwell 22.9k1313 gold badges6666 silver badges9898 bronze badges 1

• What if a user wants to enhance the size by C^+ or something of that nature. Do you still want to resize given element to be specific width? That would frustrate me if you kept resizing what I was trying to enhance. – Chris Commented Feb 1, 2011 at 13:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

You can count the number of text rectangles it has using element.getClientRects(), which returns a ClientRect object for each border-box of an element. This must be done on an inline element such as a <span> for each line of text to have its own border-box, but it's 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);
}

本文标签： javascriptAny way to determine if an element is wrappedStack Overflow