JSFiddle - React, Tailwind, and code Playground
HTML
<div class="book">
<div class="pagina">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat hendrerit eros, vulputate euismod magna luctus sed. Praesent sed velit eros. Fusce tincidunt velit a sapien accumsan dignissim. Suspendisse imperdiet semper lacinia. Morbi ut tincidunt odio. Vivamus vitae euismod quam. Integer congue ante ut nisl commodo, eu auctor elit vestibulum. Morbi id est consequat, tincidunt ipsum in, posuere neque. Nunc at mollis neque. Fusce in laoreet diam. Vivamus vestibulum, augue eget sodales eleifend, lorem velit pretium odio, eget blandit odio nulla eget magna. Donec consectetur massa diam, a molestie orci ullamcorper eget. Sed efficitur odio et lorem lacinia auctor. Donec placerat dictum elit, sit amet posuere erat tempor eu.
</p>
<p>
Mauris tempus facilisis urna, sit amet vestibulum sapien egestas vitae. Morbi ut feugiat ligula. Donec bibendum mattis nisi ut tristique. Maecenas eu leo a dui vehicula consectetur quis vel tellus. Nulla pharetra finibus mi, sed imperdiet nunc suscipit eu. Nam tincidunt fringilla turpis, ac placerat neque laoreet in. Donec vitae vehicula ex, faucibus facilisis velit.
</p>
<p>
Sed id dolor tincidunt, congue nibh id, dictum enim. Aliquam placerat nisl quis ornare sodales. Quisque lacus ex, congue in iaculis nec, accumsan in diam. Aliquam quis mollis augue. Praesent ullamcorper quam et mauris lobortis sodales. Cras vel sapien arcu. Aliquam non interdum eros. Aliquam egestas risus ut consequat ultricies. Nunc vel felis vitae odio pretium laoreet vel sit amet est. Cras at eros purus. Integer suscipit eget purus eu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet lorem nisl.
</p>
<p>
In sed magna efficitur, tincidunt nulla at, sagittis ante. Mauris commodo ex eget vulputate accumsan. Vestibulum vitae arcu sit amet purus fermentum venenatis sit amet ac tortor. Nam congue...
CSS
body {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: gainsboro;
padding: 0px;
margin: 0px;
}
.pagina {
width: 210mm;
min-height: 297mm;
padding: 30mm 20mm 20mm 30mm;
margin: 10mm auto;
border-radius: 5px;
background: white;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
JavaScript
var paginaAtual = document.querySelector(".pagina");
var book = document.querySelector(".book");
var getHeight = function (elem) {
return Math.round(elem.offsetHeight / 4.41414141);
}
var addPage = function () {
var page = document.createElement("div");
page.classList.add("pagina");
book.appendChild(page);
return page;
}
var ultimaPagina = null;
var largura = getHeight(paginaAtual);
if (largura > 297)
ultimaPagina = addPage();
while (largura > 297) {
var lastNode = paginaAtual.childNodes[paginaAtual.childNodes.length - 1];
ultimaPagina.insertBefore(lastNode, ultimaPagina.firstChild);
largura = getHeight(paginaAtual);
if (largura <= 297) {
paginaAtual = ultimaPagina;
largura = getHeight(paginaAtual);
if (largura > 297)
ultimaPagina = addPage();
}
}