Layout pagina CSS con interruzioni

Question

Sto provando a creare una pagina Web in cui sembra fondamentalmente un documento word. Ci sarebbero più riquadri che scorrevano verso il basso e il testo scorreva e la pagina si interrompeva da una pagina all'altra.

Qualcuno ha idea di dove iniziare? Grazie.

Edit: Dovrebbe essere di destra nel browser, guardando simile a questo:

(Ignorate le colonne)

Answer 1

Qualcosa del genere sembra possibile utilizzando JavaScript, ma dipende un po 'dalla struttura del codice HTML e se non si vuole rompere i paragrafi o semplicemente spostare il paragrafo successivo alla pagina successiva se non entri

Quindi l'esempio più semplice, non rompendo/elementi HTML paragrafi con una struttura piatta html (senza div annidati, colonne, ecc) come:

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

sarebbe quello di fare qualcosa di simile:

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 
} 

I'd utilizzare jquery perché rende facile per scorrere gli elementi, misurare le altezze, ecc

Credo che rompendo i paragrafi sarebbe possibile pure, ma un sacco di lavoro extra.

Answer 2

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

Answer 3

CSS vale per lo più stili per un elemento di piena a causa della sua box model. Le eccezioni sono pseudo elements. Pertanto, per creare un'interruzione appropriata dopo una lunghezza fissa, è necessario separare il testo in elementi di dimensioni corrette.

MODIFICA: Sarebbe possibile utilizzare javascript. Ma anche nel caso più semplice, dove tutto all'interno delle pagine viene consegnato come un solo elemento di testo senza elementi secondari (nemmeno altri elementi di testo), il codice sarà un incubo per lo sviluppo e funzionerà in modo piuttosto scadente. Questo perché non esiste alcuna funzione di misura in javascript. Quindi saresti costretto a fare trail ed errori per trovare la posizione corretta per rompere l'elemento. Poiché le proprietà degli elementi sono live, ciò significa che il visualizzatore del sito vedrà un sacco di sfarfallio della pagina subito dopo il caricamento. Se osi mettere altri elementi all'interno dell'elemento html per entrare nelle pagine, avrai ancora più problemi. Più o meno ottieni centinaia di casi speciali (rompi dentro altri elementi, cosa succede se quegli elementi sono dentro anche altri elementi) a cui prestare attenzione.