Question

是否有任何编程方法可以确定某条线是否已在浏览器中显示？此行下方的内容绝对定位（出于源排序的目的），如果换行，我需要更改其位置。

Answer 1

您可以通过检查元素的高度并将其与具有相同内容但更宽的类似元素进行比较来确定元素是否已被包装。

这是你可以做到的：

创建一个隐藏元素，其内容和样式与您要检查的内容和样式相同，但值非常大width。
将创建的元素附加到包含该行或段落的元素。
比较元素的高度（如果它们是相同的，没有包装;如果它们不同，则包装线）。
删除创建的元素。

例如：

＆＃13;

function checkWrapping() {

    // for each paragraph in the div, check if it was wrapped
    $("#mydiv").find("p").each(function () {

        // create a hidden paragraph with the same text and append it to the parent
        var aux = $("<p style='display:none;position:absolute;width:10000000px'>" + $(this).text() + "</p>");
        $(this).parent().append(aux);

        // compare the height of the paragrap with the height of the one-line paragraph
        if ($(this).height() > $(aux).height()) {
            console.log($(this).attr("id") + " is wrapped!");
        } else {
            console.log($(this).attr("id") + " is NOT wrapped!");
        }

        // remove the hidden paragraph at the end of the check
        $(aux).remove();
    });

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mydiv">
    <p id="p0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique rutrum velit, sit amet vestibulum dui consectetur at. Suspendisse scelerisque pellentesque lectus in lacinia.</p>
    <p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p id="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique rutrum velit, sit amet vestibulum dui consectetur at.</p>
</div>
<input type="button" value="check if wrapped" onclick="checkWrapping();">

＆＃13;

您也可以在此jsfiddle上看到示例：http://jsfiddle.net/o1ay0e71/（它可以让您轻松调整窗口大小以比较结果）。

此外，如果该行包含html代码，请使用.html()代替.text()，如此更新所示：http://jsfiddle.net/o1ay0e71/1/

确定某行是否已包含在浏览器中

1 个答案: