css pdf：在溢出内容上强制分页
css pdf: force page break on overflow content
我正在使用 handlebars 和 puppeteer 生成 pdf。 pdf 的设计非常繁重，包含大量动态数据，因此我使用 css 来模拟 A4 格式的页面，但由于用户输入，我已经达到了无法预测数据大小的地步。我的意思是，如果数据溢出超出页面底部限制，它会继续进入空白，而不是自动进入下一页。我的问题是，有没有办法查看页面内容是否超出了父级的限制，如果是这样.. 将它分成另一个 div/page 和 css 或 JavaScript？
这是我的代码的一个小模型。
https://codepen.io/LTFoReal/pen/wvKboNJ
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[size="A4"] {
width: 21cm;
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;
}
.essay-data-container .essay-data-header {
text-transform: uppercase;
}
<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>
<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.
</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.
</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.
</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.
</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.
</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.
</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.
</p></li>
</ul>
</div>
</page>
<page size="A4"></page>
这就是我设法做到的。它并不完美，但对这两页来说效果很好，加上一些额外的东西 javascript 你可以让它对整个 pdf 都有效。
基本上我根据 client/scroll 宽度和高度检查它是否溢出。这是我获得灵感的地方，也是检查溢出的大部分代码https://www.geeksforgeeks.org/how-to-determine-the-content-of-html-elements-overflow-or-not/
然后，我获取溢出的 li 标签并将其推入一个名为 removedLis 的新数组。之后，我将这个 removedLis 附加到下一页
--编辑
现在它正在处理无数的页面
你可以在这里测试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>
我正在使用 handlebars 和 puppeteer 生成 pdf。 pdf 的设计非常繁重，包含大量动态数据，因此我使用 css 来模拟 A4 格式的页面，但由于用户输入，我已经达到了无法预测数据大小的地步。我的意思是，如果数据溢出超出页面底部限制，它会继续进入空白，而不是自动进入下一页。我的问题是，有没有办法查看页面内容是否超出了父级的限制，如果是这样.. 将它分成另一个 div/page 和 css 或 JavaScript？
这是我的代码的一个小模型。 https://codepen.io/LTFoReal/pen/wvKboNJ
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[size="A4"] {
width: 21cm;
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;
}
.essay-data-container .essay-data-header {
text-transform: uppercase;
}
<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>
<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.
</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.
</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.
</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.
</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.
</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.
</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.
</p></li>
</ul>
</div>
</page>
<page size="A4"></page>
这就是我设法做到的。它并不完美，但对这两页来说效果很好，加上一些额外的东西 javascript 你可以让它对整个 pdf 都有效。
基本上我根据 client/scroll 宽度和高度检查它是否溢出。这是我获得灵感的地方，也是检查溢出的大部分代码https://www.geeksforgeeks.org/how-to-determine-the-content-of-html-elements-overflow-or-not/
然后，我获取溢出的 li 标签并将其推入一个名为 removedLis 的新数组。之后，我将这个 removedLis 附加到下一页
--编辑
现在它正在处理无数的页面
你可以在这里测试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>