index.html

<style>
    .page{
        width:200px;
        height:300px;
        background:#eee;
        padding:10px;
        display: inline-block;
    }
</style>
<div class="page">
    <p>hi how are you feeling today inshallah I will be there in about your post on the text and see if there  any technical support phone you can do it you have any questions you may want to pass on this one minute and I will send my resume to the email form of queue and respond to you tomorrow love you guys too I just the sorting and respond with</p>

    <p>the is a lot more about the election results is a lot more about the election results is a lot more about the election results is a lot more than you know when I'm available at 1 hour or less I working on it right now if there is a time</p>
</div>
<template class="tmpPage">
    <div class="page">
        <p></p>
    </div>
</template>
<script>
    let pages = [];
    let pageBottom = document.querySelector(".page").getBoundingClientRect().bottom;

    // split paragraphs into multiple paragraphs based on condition (overflow of page)
    function splitParagraph(paragraph, condition, startIndex = 0, result = []) {
        let splitIndex = startIndex;
        while (splitIndex < paragraph.length && !condition(paragraph.slice(startIndex, splitIndex + 1))) { // find overflow
            splitIndex++;
        }

        if (splitIndex >= paragraph.length) { // no overflow
            result.push(paragraph.slice(startIndex));
            return result;
        }

        while (splitIndex < paragraph.length && paragraph[splitIndex] !== ' ') { // find next space
            splitIndex++;
        }

        let splitString = paragraph.slice(startIndex, splitIndex).trim(); // trim to remove trailing spaces
        result.push(splitString); // add split string to result
        return splitParagraph(paragraph, condition, splitIndex + 1, result); // recursive call
    }
  
 
  // more code here
  
</script>