Word-многостраничное поведение: когда DIV заполнен, текст переходит в новый DIV

Question

Мне нужно, чтобы веб-приложение обрабатывало многостраничный вид. Как, например, Google Docs.

 _______
|My job |
|is to  |
|find <strike>a</strike> |
────────
> First DIV full of text, new DIV created, incomplete 
word putted in the new DIV and input can continue.
 _______
|answers|
|help me|
|please!|
 ────────

В этом JSFiddle вы можете увидеть мою первую попытку без какой-либо оптимизации или проверки ошибок. Это работает для начала. Просто напишите какой-нибудь текст, пока DIV не заполнится.

Но я, вероятно, иду по неправильному пути, например, он не будет работать со вставленным текстом. Или это означает, что мне нужно вычислять смещения и сохранять содержимое каждый раз, когда в документ вносятся изменения, которые не поддерживают ЦП.

Поэтому мне интересно:

• - это Есть ли другой способ (с CSS возможно), чтобы иметь это многостраничное поведение? Ничего не могу найти по этому поводу. Я пытался взломать поведение CSS columns или использовать новые "CSS Регионы", но он пока не очень совместим.
• Возможно ли создать текстовый пробел внутри уникального DIV для имитации многостраничный? Я могу смоделировать разрыв страницы с CSS фонами, но текст все равно будет отображаться через разрыв.
• это напрасно для веб-приложения? Те, кого я знаю, как это работает, точно контролируют количество строк в элементе, создавая DIV для каждого переноса строки. Это единственный способ?
• Также я только что нашел эти два похожих (старых) вопроса, но решения не являются динамическими c и подразумевают клонирование всего контента и скрытие его части. CPU-жадный на мой взгляд тоже: Перенос переполнения с одного деления на другой и Имитация многостраничного документа в CSS3

Спасибо!

var clone = document.getElementById("clone"),
    page = document.getElementById("page");

document.addEventListener("keydown", function(e) {
  var key = e.keyCode || e.which;
  13 == key && (document.execCommand("DefaultParagraphSeparator", false, "br"));
}, !1);

document.addEventListener("keyup", function(e) {
  var key = e.keyCode || e.which;
  var string = page.textContent;
  var regex = / $/g.test(string);
  var lastW = string.match("([a-z]+) ?$", "g");

  if ((clone.scrollWidth > clone.clientWidth || clone.scrollHeight > clone.clientHeight) && regex) {
    page.innerHTML = page.innerHTML.replace(lastW[0], "");
    page.removeAttribute("id");
    var newPage = document.createElement("div");
    newPage.setAttribute("id", "page");
    newPage.setAttribute("contenteditable", "true");
    newPage.setAttribute("class", "page");
    document.body.appendChild(newPage);
    page = document.getElementById("page");
    page.innerHTML = lastW[0] + " ";
    placeCaretAtEnd(page);
  }
  clone.innerHTML = document.getElementById("page").innerHTML;

}, !1);