有什么方法可以确定元素是否被包裹？

Question

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

这可能吗？

Answer 1

您可以计算它使用的文本矩形的数量,它element.getClientRects()为元素的每个边框返回一个ClientRect对象.这必须在内联元素上完成,例如<span>每个文本行都有自己的边框,但它很简单,可以使用:

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