CSS макет страницы с перерывами

Question

Я пытаюсь создать веб-страницу, где она в основном выглядит как текстовый документ.Было бы несколько блоков, которые прокручивались бы вниз, и текст передавался бы и разрывался от одной страницы к другой.

У кого-нибудь есть идеи, с чего бы мне начать?Спасибо.

Редактировать: должно быть прямо в браузере, выглядит примерно так:

(игнорировать столбцы)

Answer 1

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

EDIT: Это было бы возможно с помощью JavaScript. Но даже в простейшем случае, когда все внутри страниц доставляется как один текстовый элемент без подэлементов (даже без других текстовых элементов), код будет кошмаром разработки и будет работать довольно дрянно. Это потому, что в javascript нет функции измерения. Таким образом, вы будете вынуждены делать след и ошибки, чтобы найти правильную позицию, чтобы сломать элемент. Поскольку свойства элементов являются активными, это означает, что зритель веб-сайта увидит много мерцания вашей страницы сразу после загрузки. Если вы решитесь поместить другие элементы в элемент html, чтобы разбить их на страницы, вы столкнетесь с еще большими проблемами. Более или менее вы получаете сотни особых случаев (разрыв внутри других элементов, что если эти элементы находятся внутри даже других элементов), на которые стоит обратить внимание.

Answer 2

Нечто подобное звучит возможно с использованием javascript, но это немного зависит от структуры вашего html и от того, хотите ли вы разбить абзацы или просто переместите следующий абзац на следующую страницу, если он не подходит

Итак, самый простой пример - не разбивать абзацы / элементы html с плоской структурой html (без вложенных элементов div, столбцов и т. Д.), Например:

<div class="document">
  <h1>title</h1>
  <p>texts</p>
  <h2>subtitle</h2>
  <p>texts</p>
  ...
  <p>texts</p>
</div>

будет делать что-то вроде:

height = 0
loop through all direct child elements of .document
{
    if ( (height + element_height) > page_height)
    {
        add page_break_element before current element
        height = 0
    }
    height = height + element_height
}

Я бы использовал jquery , потому что он позволяет легко проходить по элементам, измерять высоту и т. Д.

Полагаю, что разбить абзацы тоже можно, но много дополнительной работы.

Answer 3

<p style="page-break-before: always">This would print on the next page</p>