Non esiste una page-breakproprietà effettiva in CSS. In realtà è un insieme di 3 proprietà: page-break-before, page-break-aftere page-break-inside. Queste proprietà aiutano a definire come dovrebbe comportarsi il documento una volta stampato. Ad esempio, per rendere un documento stampato più simile a un libro.
Proprietà
interruzione di pagina prima
La page-break-beforeproprietà aggiunge un'interruzione di pagina prima dell'elemento a cui è applicata.
Nota : questa proprietà è in corso di sostituzione con la break-beforeproprietà più generica . Questa nuova proprietà gestisce anche le interruzioni di colonna e di area pur essendo sintatticamente compatibile con page-break-before. Quindi prima dell'uso page-break-before, controlla se puoi usare break-beforeinvece.
Un caso d'uso comune per questo è applicarlo al selettore in #commentsmodo che un utente che stampa una pagina con commenti possa facilmente scegliere di stampare l'intero documento ma fermarsi prima dei commenti in modo pulito.
interruzione di pagina dopo
La page-break-afterproprietà aggiunge un'interruzione di pagina dopo l'elemento a cui è applicata.
Nota : questa proprietà è in corso di sostituzione con la break-afterproprietà più generica . Questa nuova proprietà gestisce anche le interruzioni di colonna e di area pur essendo sintatticamente compatibile con page-break-after. Quindi prima dell'uso page-break-after, controlla se puoi usare break-afterinvece.
page-break-inside
La page-break-insideproprietà aggiunge un'interruzione di pagina all'interno dell'elemento a cui è applicata.
Sintassi
page-break-after : auto | always | avoid | left | right page-break-before : auto | always | avoid | left | right page-break-inside : auto | avoidI valori lefte rightper page-break-beforee si page-break-afterriferiscono a un layout diffuso (come un libro) in cui sono presenti pagine distinte a sinistra e a destra. Funzionano così:
leftforza una o due interruzioni di pagina dopo l'elemento in modo che la pagina successiva sia formattata come pagina sinistra.rightforza una o due interruzioni di pagina dopo l'elemento in modo che la pagina successiva sia formattata come pagina destra.
Considera alwayscome un mix di entrambi. La specifica dice:
Un programma utente conforme può interpretare i valori "sinistra" e "destra" come "sempre".
Esempio
@media print ( h2 ( page-break-before: always; ) h3, h4 ( page-break-after: avoid; ) pre, blockquote ( page-break-inside: avoid; ) )Questo frammento di codice fa 3 cose:
- forza un'interruzione di pagina prima di tutti i
h2titoli (forse i tag h2 nel documento sono titoli di capitoli che meritano una nuova pagina) - previene le interruzioni di pagina subito dopo i sottotitoli perché sembra strano
- impedisce interruzioni di pagina all'interno di
pretag e virgolette a livello di blocco
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Qualunque | Qualunque | Qualunque | 7+ | 4+ | TBD | TBD |
Puoi stampare da dispositivi mobili, come AirPrint su iOS, ma non abbiamo testato così tanto. Se qualcuno dispone di dati sull'assistenza, faccelo sapere.