有什么方法可以确定元素是否被包裹？ [英] Any way to determine if an element is wrapped?

问题描述

基本上，我有一个HTML元素（在这种情况下，div），由于浮动元素，在低于平均值的屏幕分辨率的情况下包装到新行。我想控制这种行为，如果它确实当前被包装或将在resize / onload上包装，则以不同方式放置和/或样式化元素。

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.

这可能吗？

推荐答案

你可以算一下使用 element.getClientRects（） ，它为元素的每个边框返回一个ClientRect对象。这必须在内联元素上完成，例如< span> ，每行文本都有自己的边框，但它很简单，可以使用：

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);
}

这篇关于有什么方法可以确定元素是否被包裹？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！