Как средствами CSS, разбить текст на блоки, каждые 20 строк?

Question

[blacks83]

Господа, доброго времени суток.
Подскажите пожалуйста,
как реализовать средствами CSS3, разбивку текста на визуальные блоки?

Детали:
Есть один контейнер-обёртка с динамическим текстом от редактора (только текст).
По достижению в нем 20 строк текста, текст необходимо разбить/отчертить линией
и далее продолжить, текст - что бы получились некое подобие листов книги/блоки:

Гуглил, на CSS3 не нашел, нашел на JavaScript (jsfiddle.net/3TJxE и jsfiddle.net/Eric/WTPzn )
но нет возможности применить JavaScript (верстка встраивается в приложение, доступа
к JavaScript вроде нет, разве что внутри CSS прописывать…)

Всем откликнувшимся заранее огромное спасибо!

Comments

[Rustam Bainazarov]

Прописывать JS внутри CSS? Хм… хм…

Считать строки на CSS — невозможно. Можно только высчитать максимальную высоту по формуле: высоту строки (в em) умножить на 20. Плюс, немного подстроить, добавляя/убавляя десятые доли em, чтобы не было обрезания букв типа «р» в последней строке.

К примеру, если высота строки 1,5, нужно прописать так: max-height: 30em (1,5*20). Но добавить разделительную линию в случае, если блок достиг максимальной высоты, — невозможно. Её можно либо добавить, либо убрать для всех случаев.

[Ankhena]

https://codepen.io/anon/pen/LqwoRM

Answer 1

[Антон Шаманов]

если только текст и размер шрифта фиксируемый, то тупо прикинуть сколько такой блок примерно занимает в высоту использовать данное значение т.е. line-height: 10px; и других отступов по высоте нет, значит 20 строк = 20 х 10 = 200px

Comments

[Антон Шаманов]

вообще есть тег widows, но он в половине браузеров недоступен.

[Rustam Bainazarov]

Антон Шаманов, это тег для вывода текста на печать и он только в IE работает :))

[Антон Шаманов]

SmthTo, не только

[Ankhena]

Антон Шаманов,

вообще есть тег widows

Тег?
Может, свойство css?

Покажите, пожалуйста, пример, как оно тут поможет?

[Rustam Bainazarov]

Антон Шаманов, https://developer.mozilla.org/ru/docs/Web/CSS/widows

> На нестраничных носителях, таких как screen, CSS свойство widows не имеет эффекта.