Articolo 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Nulla facilisi. Pellentesque vitae dignissim tortor. Sed tristique.
CSS page-break-inside
La proprietà CSS2 page-break-inside impedisce la rottura interna su più pagine
La proprietà page-break-inside in CSS2 consente di evitare che un singolo elemento venga spezzato su due pagine durante la stampa. È particolarmente utile in documenti complessi, dove è importante mantenere gruppi di contenuto uniti sulla stessa pagina, come card, tabelle o sezioni testuali.
Sintassi
page-break-inside: valore;
Significato dei valori principali:
-
auto: Comportamento predefinito; il browser può dividere l’elemento tra più pagine se necessario.
-
avoid: Evita che l’elemento venga spezzato tra due pagine. Utile per contenuti complessi come blocchi di testo, immagini o tabelle.
Esempio proprietà: page-break-inside
Codice Esempio: page-break-inside
CODE: CSS
@media print {
.page-break-inside-example {
page-break-inside: avoid;
}}
Contenuto Esempio: page-break-inside
Esempio di utilizzo di page-break-inside (solo in stampa)
In questo esempio, page-break-inside: avoid viene usato per impedire che ogni article venga diviso su due pagine diverse durante la stampa:
Articolo 2
Praesent vehicula, turpis sed pretium efficitur, libero nisi lacinia risus, sed blandit erat lorem ac sapien. Integer eu imperdiet justo.
CSS e HTML per evitare rotture all'interno di elementi:
<style>
@media print {
.page-break-inside-example {
page-break-inside: avoid;
}
}
</style>
<article class="page-break-inside-example">
<h2>Articolo 1</h2>
<p>Contenuto...</p>
</article>
<article class="page-break-inside-example">
<h2>Articolo 2</h2>
<p>Contenuto...</p>
</article>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
