JSFiddle - React, Tailwind, and code Playground

by Eric

HTML

<div id="target">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at commodo enim. Integer dolor elit, elementum vitae mollis eu, lobortis fringilla diam. Maecenas consectetur malesuada sodales. Fusce nec est est, ut bibendum orci. Aenean tellus lectus, consectetur a mattis a, lobortis sit amet mauris. In vitae orci odio. Integer id massa ac elit suscipit bibendum. Vivamus a magna vitae felis ullamcorper elementum. Mauris aliquam euismod elit a mattis. Nam eu felis sed dolor sodales egestas. Sed quis quam augue. Proin bibendum iaculis felis vel pretium. Praesent ultrices sapien eget ante convallis ac iaculis lectus porta. Quisque vel lectus vel nibh facilisis auctor. Donec ac erat est, non pulvinar urna.

Mauris ut adipiscing lorem. Donec sit amet nisl non erat vestibulum auctor. Pellentesque mauris nibh, pharetra sit amet tincidunt et, tincidunt non velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam sed nisl et lorem sagittis venenatis id eget lectus. Donec nunc diam, pulvinar eget pulvinar sit amet, fermentum ac libero. Morbi sed posuere lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum, diam sit amet bibendum ullamcorper, arcu dolor rhoncus neque, a ultricies lectus nisl vitae tortor. Sed ut arcu nec dui vehicula pretium. Mauris urna arcu, tincidunt id euismod et, laoreet ac massa. Nullam at facilisis libero. Ut viverra mollis nisi, in feugiat dolor pharetra at. In pretium lacinia leo, eu lobortis ligula aliquet eu. Praesent quis dui massa.

Phasellus sed nibh vel urna lacinia egestas. Curabitur porttitor turpis ac felis tempus faucibus commodo facilisis sapien. Aliquam a lorem a purus adipiscing posuere quis quis felis. Duis id purus augue, vel adipiscing dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi orci tortor, consectetur a egestas a, condimentum quis diam. Nulla hendrerit...

CSS

#target {
   white-space: pre-wrap;   
}
.page {
   border: 1px solid black;
   padding: 5px;    
}

JavaScript

var contentBox = $('#target');
var words = contentBox.text().split(' ');
function paginate() {
    var newPage = $('<div class="page" />');
    contentBox.empty().append(newPage);
    var pageText = null;
    for(var i = 0; i < words.length; i++) {
        var betterPageText;
        if(pageText) {
            betterPageText = pageText + ' ' + words[i];
        } else {
            betterPageText = words[i];
        }
        newPage.text(betterPageText);
        if(newPage.height() > $(window).height()) {
            newPage.text(pageText);
            newPage.clone().insertBefore(newPage)
            pageText = null;
        } else {
            pageText = betterPageText;             
        }
    }    
}

$(window).resize(paginate).resize();