У меня есть div
фиксированного width: 580px
, который может содержать элементы абзаца с разным количеством (может быть 10, может быть 100). Каждый абзац будет иметь содержимое / текст из нескольких сотен слов.
Чего я хочу добиться, так это обернуть элементы p
вокруг div
(с классом) после определенных строк текста. Вот что я сделал до сих пор и не могу найти способ определить начало / конец переноса.
Также может помочь, если есть способ подсчитать строки, которых «нет» в элементах p . Например, div lipsum
имеет дополнительный диапазон или другие div, что будет подходом для его обработки?
function Wrap() {
var heightCount = 0;
$("#lipsum p").each(function() {
heightCount += $(this).height();
if (heightCount > 500) {
console.log('reached 500');
//wrap code here for e.g.
//<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, я смог изменить исходную функцию Wrap чтобы выполнить мои требования, используя wrapAll двумя следующими способами:
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;
}
}
}
Я думаю, что это можно улучшить, но я получил желаемые результаты.