將 div 包裹在特定高度/行的多個段落元素周圍

Question

我有一個固定寬度的div width: 580px ，它可以包含不同數量的段落元素（可以是 10，可以是 100）。 每個段落將有幾百個單詞的內容/文本。

我想要實現的是在某些文本行之后將p元素包裝在div （帶有類）周圍。 這是我到目前為止所做的，無法找到一種方法來識別換行的開始/結束。

如果有一種方法可以計算 p 元素中“不”的行，這也會有所幫助。 例如， lipsum有一個額外的 span 或其他 div，有什么方法可以處理它？

 function Wrap() { var heightCount = 0; $("#lipsum p").each(function() { heightCount += $(this).height(); if (heightCount > 500) { console.log('reached 500'); //wrap code here for eg //<div class="test">...[p elements with proper closing tags that are under 500 in line]...</div> heightCount = 0; } }) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btn" onclick="Wrap()">Test</button> <div id="lipsum" style="width:580px;"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed risus at orci elementum consequat. Suspendisse laoreet rhoncus dignissim. Aliquam a ultrices orci, in elementum nibh. Aliquam mollis erat at vehicula pellentesque. Nunc suscipit, leo at convallis lobortis, odio ipsum euismod sapien, auctor accumsan velit eros non risus. Cras sagittis nisi non orci finibus porta. Sed finibus ac eros eu tincidunt. Nam viverra egestas augue vestibulum elementum. Suspendisse convallis felis sodales, ornare neque ut, elementum dui. Mauris ac orci mattis, tristique nisi quis, ultricies urna. In tincidunt, dolor vitae euismod mattis, lorem arcu placerat velit, quis auctor est est et sem. Aenean convallis finibus posuere. Sed feugiat orci a lacinia efficitur. Ut semper, purus quis convallis vehicula, mi risus rhoncus arcu, et feugiat neque turpis non tellus. </p> <p> Mauris dapibus felis leo, vitae vestibulum purus feugiat sit amet. Fusce ac dapibus nunc. Etiam congue mi neque. Maecenas eget blandit turpis. Suspendisse volutpat, urna eu facilisis congue, elit felis faucibus velit, venenatis semper sem sem ut ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent blandit congue sapien. Curabitur non fermentum felis, sit amet auctor nunc. Cras id tellus nunc. </p> <p> In lacinia lectus nec quam dapibus eleifend. Phasellus iaculis eget massa non aliquam. Cras interdum gravida hendrerit. Suspendisse rhoncus pretium erat non malesuada. Fusce sit amet finibus est. Phasellus quis dapibus orci. Nunc iaculis felis odio, et dictum leo mollis sed. Morbi ultrices turpis at mi pellentesque, sit amet consectetur tortor volutpat. Mauris ac nunc ac nunc pellentesque lacinia. Duis at ligula tristique, maximus sapien sit amet, pulvinar neque. </p> <p> Nulla efficitur bibendum nunc, in efficitur nisi vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque purus purus, molestie id dignissim id, consequat a diam. Aliquam dictum eget purus et lobortis. Vivamus vitae blandit quam. Suspendisse quis enim posuere leo aliquam faucibus in quis diam. Nullam efficitur aliquam velit vel feugiat. Aenean at porttitor neque. Nam egestas ullamcorper nisl, quis aliquam ligula convallis sed. Donec et dui lectus. Ut dictum sapien nec dolor convallis tincidunt. Vivamus ut neque sed ligula lacinia mollis. Integer turpis dolor, fringilla quis orci at, finibus lacinia urna. Morbi rutrum lobortis finibus. Cras fringilla scelerisque elit vitae vehicula. </p> <p> Cras dignissim mollis magna, a viverra ante dignissim et. Vivamus malesuada neque eget arcu ultricies, non feugiat metus laoreet. Praesent rutrum gravida dolor sed fringilla. Sed at orci nec neque bibendum feugiat. Vivamus tincidunt ex nunc, ac efficitur nibh pharetra placerat. Vestibulum mi lorem, imperdiet vitae dictum tincidunt, pellentesque a diam. Etiam vestibulum dolor sit amet gravida elementum. Duis consectetur nunc lectus. </p> <p> Maecenas mi elit, lobortis nec lectus nec, accumsan pulvinar est. Duis metus ipsum, fermentum a tortor nec, lobortis commodo est. Ut lacinia magna a tellus feugiat, ac tincidunt ligula ultricies. Nam congue turpis et leo laoreet porttitor. Donec luctus eget nibh vel ultricies. Aliquam erat volutpat. Mauris vitae sapien id massa faucibus venenatis ac porttitor quam. Morbi eu ligula nec felis pharetra tempor. </p> <p> Vivamus ultrices vel augue sed aliquet. Praesent egestas nulla vel bibendum auctor. Vivamus varius nunc in metus aliquet, sit amet fermentum dui rutrum. Pellentesque volutpat quis nulla ut sodales. Duis eu pulvinar leo. Nam venenatis aliquam orci ac accumsan. Vivamus sollicitudin a nulla in facilisis. Pellentesque eget lectus gravida tortor porta molestie in et ligula. Phasellus sed lacus nisi. </p> <p> Nulla augue sem, tempor quis mauris vel, accumsan accumsan odio. Aliquam faucibus pharetra velit aliquet placerat. Mauris posuere suscipit quam non venenatis. Sed hendrerit dolor sit amet ligula consequat tempor. Sed vel luctus magna. Duis bibendum ex in odio aliquam, mattis consequat mi sodales. Morbi iaculis placerat purus, eu tincidunt purus gravida ac. Fusce sed mi lectus. Nulla orci quam, elementum vitae lacus eleifend, vulputate vehicula purus. Integer metus erat, imperdiet vitae viverra nec, ultricies et est. Vestibulum auctor leo at euismod ullamcorper. Sed feugiat justo vel ipsum molestie, at sagittis lectus finibus. Morbi a augue turpis. Vestibulum nec erat nec eros vehicula tincidunt. </p> <p> Proin iaculis, lectus elementum ornare tempor, metus turpis fringilla metus, eu bibendum ligula sapien eget ligula. Etiam sit amet laoreet velit. Phasellus et imperdiet orci. Sed vestibulum dictum tellus vitae ultrices. Suspendisse varius nulla eu mi semper, vitae molestie nunc auctor. Ut tempus tincidunt luctus. Sed tempus metus odio, ut eleifend magna venenatis nec. Quisque aliquet diam mi, vel porttitor tortor congue eget. Proin elementum felis id risus maximus finibus. Fusce sed volutpat risus. Nunc ornare laoreet dolor at vulputate. Ut mauris sapien, aliquam commodo metus et, accumsan varius erat. Nunc condimentum tortor at velit interdum, et iaculis neque vulputate. </p> <p> Aliquam non consectetur risus. Integer quis quam id eros malesuada pulvinar. Sed vitae orci auctor, aliquet odio sit amet, ornare risus. In hac habitasse platea dictumst. Pellentesque dapibus semper ipsum, eget cursus arcu iaculis in. Quisque efficitur nunc dui. Sed posuere sodales mauris, ac iaculis sem malesuada ut. Vivamus quis magna in libero suscipit scelerisque pellentesque commodo urna. Pellentesque quis purus maximus, scelerisque lacus vitae, facilisis urna. In hac habitasse platea dictumst. Suspendisse quis aliquam arcu. Vivamus maximus pulvinar lacus vitae suscipit. Donec iaculis dictum ante, ut scelerisque enim pulvinar ac. Curabitur egestas eget elit ac sagittis. Nunc nec enim viverra, lobortis nunc non, pellentesque mauris. </p> </div>

更新：

在@ControlAltDel 提供的解決方案的幫助下，我能夠通過以下兩種方式使用 wrapAll 來修改原始 Wrap function 以滿足我的要求：

function Wrap() {
    var x = document.getElementById("lipsum");
    var p = x.querySelectorAll("p");
    var startHeight = 0;
    //var firstDivP = 0;
    const pageHeight = 200;

    for (var i = 0; i < p.length; i++) {
        $(p[i]).addClass("wrapthis");

        if ($(p[i]).offset().top > startHeight + pageHeight) {
            $(".wrapthis").wrapAll("<div class='main'></div>")
            //lastDivP = i;
            startHeight = $(p[i]).offset().top;
            $(p).removeClass("wrapthis");
        }
    }
}

和：

function Wrap() {
    var x = document.getElementById("lipsum");
    var p = x.querySelectorAll("p");

    var heightCount = 0;
    for (var i = 0; i < p.length; i++) {
        $(p[i]).addClass("wrapthis");
        heightCount += $(p[i]).height();

        if (heightCount > 230) {
            $(".wrapthis").wrapAll("<div class='main'></div>")

            $(p).removeClass("wrapthis");
            heightCount = 0;
        }
    }
}

我認為這可以進一步改進，但我得到了我想要的結果。

Answer 1

就像我說的，身高要容易得多。 你可以得到你的 p 的偏移量

var x = document.getElementById("lipsum");
var p = x.querySelectorAll("p");
var startHeight = 0;
var firstDivP = 0;
const pageHeight = ...;

for (var i = 0; i < p.length; i++) {
  if ($(p[i]).offset().top > startHeight + pageHeight) {
    //put a div around the preceeding paragraphs. this means from firstDivP to i - 1
    firstDivP = i;
    startHeight = $(p[i]).offset().top;
  }
}

這實際上比計算行數要好得多（在我看來:)），因為你不能將半個段落放在一個 div 中。