Proprietà CSS orphans
Usa la proprietà CSS orphans per specificare il numero di righe che possono rimanere in fondo a una pagina o colonna. Scopri la proprietà e prova esempi.
La proprietà CSS orphans imposta il numero minimo di righe di un box a livello di blocco che devono rimanere in fondo a una pagina, regione o colonna quando il box viene spezzato in corrispondenza di un confine di frammentazione. Se rispettare il valore lascerebbe meno righe di quante richieste, il browser sposta l'intero gruppo di righe alla pagina o colonna successiva.
Questa pagina illustra cos'è un'orfana, quando la proprietà ha effettivamente effetto, la sua sintassi e i suoi valori, e un esempio eseguibile.
Cos'è un'orfana?
In tipografia, un'orfana è la prima riga di un paragrafo che rimane isolata in fondo a una pagina o colonna mentre il resto del paragrafo continua nella pagina successiva. Le orfane risultano sgradevoli, quindi la proprietà consente di indicare al browser di mantenere insieme un numero minimo di righe.
Page 1 (bottom) Page 2 (top)
┌──────────────────┐ ┌──────────────────┐
│ ... │ │ but the leap into │ ← orphan: just 1 line
│ │ │ electronic ... │ was left behind on
│ It has survived │ │ │ page 1 → looks bad
└──────────────────┘ └──────────────────┘Con orphans: 2, un paragrafo che lascerebbe solo una riga in fondo viene spostato interamente alla pagina successiva, mantenendo insieme almeno due righe.
Quando si applica orphans?
La proprietà è rilevante solo nei contesti frammentati — situazioni in cui il contenuto è suddiviso tra più box:
- Stampa (e Anteprima di stampa / stampa in PDF), dove il contenuto del flusso si distribuisce su più pagine.
- Layout multi-colonna creati con la proprietà columns, dove le righe si spezzano tra le colonne.
- CSS paged media, spesso combinato con la regola @media (es.
@media print { … }) per applicarlo solo in fase di stampa.
Nei normali layout a colonna singola su schermo non vi sono interruzioni di pagina o di colonna, quindi impostare orphans non produce alcun effetto visibile. Per vederlo in azione, visualizza l'esempio di seguito in Anteprima di stampa o utilizza la configurazione multi-colonna fornita.
La proprietà orphans ha una proprietà gemella, widows, che imposta il numero minimo di righe consentite in cima alla pagina o colonna successiva. Di solito vengono impostate insieme.
| Valore iniziale | 2 |
|---|---|
| Si applica a | Elementi contenitore di blocchi. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSS2 |
| Sintassi DOM | object.style.orphans = "2"; |
Sintassi
orphans: <integer> | initial | inherit;Il valore deve essere un intero positivo. I valori negativi e 0 non sono validi e vengono ignorati (la proprietà mantiene il valore precedente). Il valore predefinito è 2.
Esempio della proprietà orphans
Esempio di codice CSS orphans
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #eee;
color: #000;
font-size: 1em;
font-family: Roboto, Helvetica, sans-serif;
}
hr {
margin: 50px 0;
}
.example {
margin: 30px auto;
width: 800px;
}
.text {
padding: 20px;
background-color: #fff;
-moz-columns: 10em 3;
-webkit-columns: 10em 3;
columns: 10em 3;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
text-align: justify;
}
.text p {
orphans: 4;
}
</style>
</head>
<body>
<h2>Orphans property example</h2>
<div class="example">
<div class="text">
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummy text of the printing and typesetting industry.
</p>
<p>
<span style="color: #8ebf42; font-weight: bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
</p>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</body>
</html>Nell'esempio fornito, orphans: 4 forza almeno quattro righe di ogni paragrafo a rimanere insieme in fondo a una colonna. Il paragrafo verde lo dimostra: il browser mantiene quattro righe in fondo alla prima colonna invece di lasciare una singola riga isolata.
Applicare orphans solo in fase di stampa
Poiché orphans influisce solo sui contenuti frammentati, un pattern comune è circoscriverlo all'output di stampa con una media query:
@media print {
p {
orphans: 3;
widows: 3;
}
}Questo mantiene almeno tre righe insieme in fondo (orphans) e in cima (widows) di ogni pagina stampata, senza influenzare il layout su schermo.
Valori
| Valore | Descrizione |
|---|---|
<integer> | Specifica il numero di righe che possono rimanere alla fine di una pagina o colonna. I valori negativi non sono validi. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
Anche queste proprietà controllano come il contenuto si spezza tra pagine e colonne:
- widows — la proprietà gemella; numero minimo di righe in cima alla pagina o colonna successiva.
- page-break-inside — impedisce (o consente) un'interruzione di pagina all'interno di un elemento.
- columns e column-gap — configurano il layout multi-colonna in cui
orphanspuò avere effetto.