On overflow create a new div and transfer overflow text to the new div

Question

Context:

I am working on a project that if completed properly should function as a specialized text editor. It specifically needs pages though for the output, so unlike most online text editors which can simply use an ever expanding textbox or something mechanically similar I am looking for a way to create a "new page" (a new container div essentially) when it overflows the one its in.

I found one related stackoverflow question and it seems from my searching that most solutions wouldnt be the best for actively changing text and are more suited to being used at page render. Under optimal circumstances it should function much like creating a new page on a word document (automatically create it when it overflows) and use javascript/jquery.

I realize that it is likely more complicated to do this than it would appear initially but I was hoping somebody would know of an article or piece of code that could point me in the right direction.

Problem:

I think I can handle actually "creating the new page" (next container div) but I am unsure how to handle the text overflowing actively. For instance if someone deletes some text on the first page it would be very unwieldy if the text on the second page simply hung there. I want the text/pages to react at least similarly to how they would if you were editing a word document.

I dont want to check the text every time a character is added or deleted, but is this the only way to do something like that? And if so what is the most efficient way for me to do that so I dont bog down the browser.

This is the project I am working on to give more context http://www.naturalcrit.com/homebrew/

Answer 1

I think that the best answer both for functionality and simplicity is to use CSS3 columnand just allow it to expand widthwise. Then add styles to the columns or other elements to make them look like pages. Add an x-axis scrollbar to scroll through the pseudo-pages (which is just a lot of columns with a fixed height) and its practically done.

This means that the pages will be going left to right rather than up and down but it isn't a bad solution at all. Thank you @Twisty for the simple solution using something I already am using and easily have access to. It doesn't even involve code, just some more CSS!