Układ strony CSS z przerwami

Question

Próbuję utworzyć stronę, na której zasadniczo wygląda jak dokument tekstowy. Byłoby wiele skrzynek, które przewijałyby się w dół, a tekst przepływałby i podział strony z jednej strony na drugą.

Czy ktoś ma pojęcie, od czego chciałbym zacząć? Dzięki.

Edit: To powinno być w porządku w przeglądarce, patrząc podobny do tego:

(Ignoruj ​​kolumny)

Answer 1

Coś jak to brzmi to możliwe przy użyciu JavaScript, ale to zależy trochę od struktury kodu HTML i czy nie chcesz łamać akapitów lub po prostu przejść do następnego akapitu do następnej strony, jeśli doesnt pasuje

więc najprostszy przykład, nie łamiąc paragrafy/elementów hTML z płaskiej struktury html (bez zagnieżdżonych div, kolumny, itp), takich jak:

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

byłoby zrobić coś takiego:

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 
} 

bym użyć jquery ponieważ ułatwia pętli elementów, pomiar wysokości, itp

Chyba łamanie ustępy byłaby również możliwa, ale wiele dodatkowej pracy.

Answer 2

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

Answer 3

CSS przeważnie stosuje style do pełnego elementu ze względu na jego box model. Wyjątki to pseudo elements. Aby utworzyć odpowiednią przerwę po ustalonej długości, musiałbyś oddzielić tekst na odpowiednio dobrane różne elementy.

EDYCJA: Byłoby możliwe przy użyciu javascript. Ale nawet w najprostszym przypadku, gdy wszystko wewnątrz stron jest dostarczane jako jeden element tekstowy bez żadnych elementów podrzędnych (nawet innych elementów tekstowych), kod będzie koszmarem rozwoju i będzie działał całkiem nieudolnie. Dzieje się tak dlatego, że w javascript nie ma funkcji pomiaru. Więc będziesz zmuszony zrobić ślad i błąd, aby znaleźć właściwą pozycję, aby przełamać żywioł. Ponieważ właściwości elementów są aktywne, oznacza to, że użytkownik witryny zobaczy dużo migotania strony zaraz po załadowaniu. Jeśli odważysz się umieścić inne elementy wewnątrz elementu html, aby włamać się na strony, masz jeszcze więcej problemów. Mniej więcej dostajesz setki specjalnych przypadków (włamujesz się do innych elementów, a jeśli te elementy są wewnątrz nawet innych elementów), na które trzeba zwrócić uwagę.