Это то, что мне удается. Это не идеально, но отлично работает для этих двух страниц, и с некоторыми дополнительными javascript вы можете сделать эту работу для всего pdf.
В основном я проверяю, не переполняется ли он на основе ширины и высоты клиента / прокрутки. Здесь я черпаю вдохновение и большую часть кода для проверки переполнения https://www.geeksforgeeks.org/how-to-determine-the-content-of-html-elements-overflow-or-not/
Затем я получаю теги li, которые переполняются, и pu sh в новый Массив с именем deletedLis. После этого я просто добавляю этот удаленныйLis на следующей странице
- EDIT
Теперь он работает с бесчисленным количеством страниц
Вы можете протестировать здесь https://codepen.io/paulodelia/pen/ZEbNKBX
<!DOCTYPE HTML>
<html>
<head>
<title>
How to determine the content of
HTML elements overflow or not
</title>
<style>
body {
background: rgb(204, 204, 204);
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
page-break-before: always;
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
max-height: 29.7cm;
padding: 5em 30px 0 30px;
position: relative;
}
@media print {
body,
page {
margin: 0;
box-shadow: 0;
}
}
.essay-data-container {
min-height: 300px;
max-height: 400px;
}
.essay-data-container .essay-data-header {
text-transform: uppercase;
}
ul {
height: 25cm;
}
@media all {
.page-break {
display: block;
page-break-before: always;
}
}
</style>
</head>
<body onload="gfg_Run()">
<page size="A4">
<h1>A RANDOM HEADER</h1>
<div class="essay-data-container">
<h4 class="essay-data-header">This is the sub-title</h4>
<ul class="GFG_UP">
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod luctus neque, eu pulvinar
ante elementum vel. Pellentesque rutrum sapien vitae neque ornare, id vehicula nibh fermentum.
Aliquam accumsan dictum gravida. Integer nec molestie mauris, sit amet placerat risus. Nam dolor
dui, fringilla ac fermentum ac, mattis non enim. Vestibulum porttitor justo sed arcu porta
dapibus. Suspendisse varius eros et ante ultricies congue. Nam magna ante, ornare sed tincidunt
eget, euismod et nunc. Suspendisse venenatis aliquet ex et lacinia. Curabitur vitae ornare nibh.
Suspendisse hendrerit fermentum egestas. Duis in nibh eros. 1
</p>
</li>
<li>
<p>Phasellus eu imperdiet mauris. Nam iaculis metus eget nisi volutpat mollis. Praesent luctus nulla
non lacus porta, nec cursus lorem eleifend. Quisque libero justo, fringilla vitae vestibulum in,
bibendum vehicula justo. Fusce non leo porttitor, consequat enim vitae, luctus lacus. Nulla in
sollicitudin quam, in vestibulum nisl. Etiam congue metus nunc, a tincidunt diam lobortis quis.
Ut sodales mi magna, sit amet suscipit tellus semper id. Sed mattis efficitur justo eget
tincidunt. Mauris vel commodo velit. Fusce augue magna, faucibus id venenatis sit amet, luctus
id neque. Maecenas sed justo pellentesque, porttitor eros at, lobortis est. Nunc fringilla nisi
eget erat aliquet, non tristique nulla imperdiet. Proin posuere elementum elit. Praesent massa
massa, condimentum et consectetur non, ullamcorper et odio. 2
</p>
</li>
<li>
<p>Nunc malesuada eu leo eget bibendum. Sed vitae justo euismod, vestibulum tortor sit amet, cursus
augue. Nunc aliquet ullamcorper mollis. Nulla blandit porttitor tempor. Curabitur egestas dolor
a enim lobortis iaculis sit amet non enim. Vestibulum sagittis est sollicitudin eros elementum,
a pulvinar ante euismod. Phasellus pulvinar rhoncus tortor eget congue. Integer mattis
vestibulum ex sit amet pulvinar. Praesent luctus felis urna, at bibendum justo eleifend ut.
Nullam facilisis faucibus arcu, nec ultrices turpis consequat nec. Aliquam in lacus libero.
Praesent tempor malesuada rutrum. Suspendisse potenti. Aenean nec ligula nisi. 3
</p>
</li>
<li>
<p>Quisque a faucibus nibh. Vestibulum faucibus elit a elementum semper. Phasellus ac felis porta,
finibus nibh gravida, fermentum metus. Donec a mauris dui. Morbi a turpis ac augue commodo
ornare quis auctor purus. Cras consectetur turpis at nisi hendrerit gravida. Duis auctor
faucibus mi, at hendrerit justo scelerisque in. Morbi bibendum leo sed arcu ultricies, a varius
ante maximus. Donec molestie orci id rhoncus aliquam. Morbi id sodales elit. 4
</p>
</li>
<li>
<p>Aenean viverra iaculis ante, nec sodales ipsum tempor a. Fusce risus nisl, aliquet quis arcu
quis, consequat faucibus nibh. Aliquam eu pellentesque nulla, sed cursus leo. Vestibulum vel
nibh orci. Phasellus vitae lacinia nulla. Ut at magna mollis, venenatis metus quis, ultricies
enim. Integer ullamcorper sit amet magna at interdum. Pellentesque a mauris nec sem condimentum
tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. In ac lectus vitae eros aliquam condimentum. Donec luctus ullamcorper neque, ut lobortis
odio aliquet ut. 5
</p>
</li>
<li>
<p>
Nulla ornare eros vel mattis feugiat. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Sed vitae dolor velit. Aliquam egestas pharetra accumsan.
Integer lobortis massa nec felis egestas, quis finibus neque aliquam. Integer consectetur nibh
augue, at ultrices sem sagittis vel. Aliquam eu venenatis neque. Fusce aliquet sem ac lorem
fringilla, malesuada luctus risus sodales. Mauris sed lectus ut tellus rhoncus lacinia.
Pellentesque ultrices condimentum leo eu pharetra. Maecenas sit amet tortor at nisl mollis
accumsan. Etiam volutpat tortor et libero mollis, ut facilisis massa feugiat. 6
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper. 7
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper. 8
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper. 9
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.10
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.11
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.12
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.13
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.14
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.15
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.16
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.17
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.18
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.19
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.20
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.21
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.22
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.23
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.24
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.25
</p>
</li>
</ul>
</div>
</page>
<script>
var el_up = document.querySelector(".GFG_UP");
function check(el) {
var curOverf = el.style.overflow;
if (!curOverf || curOverf === "visible")
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverf;
return isOverflowing;
}
function gfg_Run() {
ans = "No Overflow";
if (check(el_up)) {
ans = "Content Overflowed";
containOverflow(el_up);
}
}
function containOverflow(el) {
var lis = [...el.getElementsByTagName('li')];
var removedLis = [];
while (check(el)) {
removedLis.push(lis.pop())
console.log(removedLis)
el.removeChild(el.lastElementChild)
}
var nextPage = document.createElement('page')
nextPage.setAttribute('size', 'A4')
document.querySelector('body').appendChild(nextPage);
var nextPageUl = document.createElement('ul')
nextPageUl.classList.add('GFG_UP')
nextPage.appendChild(nextPageUl)
for(let i = removedLis.length - 1 ; i >= 0; i--) {
nextPageUl.appendChild(removedLis[i])
}
if (check(nextPage.querySelector('.GFG_UP'))) {
containOverflow(nextPage.querySelector('.GFG_UP'))
}
}
</script>
</body>
</html>