Как разбить контент по виртуальным страницам?

Question

[Андрей]

Есть следующая структура из editorjs

{
    blocks: [{
            id: "7RosVX2kcH",
            type: "paragraph",
            data: {
                text: "Given data can be used as you want: render with HTML for Web clients, render natively for mobile apps, create the markup for Facebook Instant Articles or Google AMP, generate an audio version, and so on.",
            },
        },
        {
            id: "eq06PsNsab",
            type: "paragraph",
            data: {
                text: "Clean data is useful to sanitize, validate and process on the backend.",
            },
        },
        {
            id: "hZAjSnqYMX",
            type: "image",
            data: {
                file: {
                    url: "assets/codex2x.png",
                },
                withBorder: false,
                withBackground: false,
                stretched: true,
                caption: "CodeX Code Camp 2019",
            },
        },
    ],
}

Как можно разместить и посчитать количество страниц на экране устройства, чтобы не было скролла? Например, на iphone se на первой странице влезет только первый параграф, остальное нужно разместить на следующей странице, а на экране десктопа поместится весь контент и будет только одна страница.

Answer 1

[Владимир Коротенко]

Только ручками.
Итак создаете блок. Через яваскрипт вычисляете его высоту, если место остается, создаете второй блок, и так до того момента пока не появляется прокрутка, тогда последний удаляете