1) Вы зависите от шрифта, те для разных шрифтов текст будет разной длинны
2) Вы зависите от размера шрифта, те для разного размер шрифта будет текст разной длинны
3) Вы зависите от тегов, теги могут содержать стили с разными шрифтами, шрифты в теге
h1 могут отличаться от шрифтов в теге
p, к токму же падинги, маржены и др. стили
4) Вы зависите от необходимого размера разделения, те сколько пикселей по ширине и высоте примерно должно помещаться в один блок и как это должно быть на разных устройствах/размерах экрана
5) Вы не говорите как доржен вести себя html элемент не вмещающийся Ваш страничный блок
* Я бы для нескольких колонок советовал бы
caniuse.com/multicolumn
* Я бы для нескольиких страниц элемент фиксированной высоты и overflow: hidden тогда количество страниц определяется
Math.ceil(content.height / container.height)
, а очередная страница оределяется как
top: container.height * (page_no - 1)
и переключение на js (можно добавить градиент фон-прозрачный, чтобы обрубание текста выгладило красивее).
* Если разметка довольно простая и содержит много блоков, то
$(content).children()
и для каждого дочернего элемента высчитываем длинну символов и разделяем на блоки по длинне.
* Если разметка более сложная, то берем каждый элемент и высчитывем дилнну в зависимости от тега (класса, стиля) при этом запоминая в каких тегах мы находимся, когда доходим придельной длинны, то вставляем завершиющий тег дива страницы, а следующую страницу начинаем с сохраненных тегов разметки (теги inline h1, p и тд в теории должны закрываться страничным дивом).
ЗЫ. Есть всякие js плагины реализующие
... для обрезания больших блоков, то что я когда-то использовал делило текст на части и в зависимости от длинны уменьшало/увеличивало отображаемый текст до тех пор, пока элемент не будет необходимой дилнны, возможно Вам подойдут похожие плагины.