Proprietà CSS widows
Usa la proprietà CSS widows per specificare il numero di righe che possono restare in cima a una pagina o colonna. Scopri la proprietà e prova gli esempi.
La proprietà CSS widows specifica il numero minimo di righe di un contenitore block-level che devono rimanere in cima a una pagina o colonna.
Una "vedova" (widow) è una singola riga o parola che appare da sola in cima a una pagina o colonna.
Questa proprietà viene usata principalmente in contesti di media impaginati, come le regole @media print o @page.
La proprietà widows ha una proprietà correlata: orphans, che specifica il numero minimo di righe che devono restare in fondo alla pagina o colonna precedente. In altre parole, le righe rimaste alla fine della pagina precedente sono "orfane" (orphans), mentre le righe lasciate in cima alla nuova pagina sono "vedove" (widows).
Perché usare la proprietà widows
Quando un paragrafo viene diviso su due pagine o due colonne, l'interruzione può lasciare una singola riga isolata in cima alla pagina successiva. Quella riga isolata è difficile da leggere e appare poco rifinita nei documenti stampati e nei layout multicolonna.
La proprietà widows consente di impostare un numero minimo di righe che il browser deve mantenere insieme in cima alla nuova pagina o colonna. Se rispettare la divisione lascerebbe meno righe del consentito, il browser sposta righe aggiuntive avanti in modo da soddisfare la soglia. Ad esempio, widows: 3 garantisce che almeno tre righe di un paragrafo passino insieme alla pagina successiva.
Abbina widows a orphans per controllare entrambe le estremità di un'interruzione: orphans protegge il fondo della pagina precedente, widows protegge la cima della pagina successiva.
I valori negativi non sono validi. Il valore deve essere un numero intero positivo.
| Valore iniziale | 2 |
|---|---|
| Si applica a | Elementi contenitore di tipo block. |
| Ereditato | Sì. |
| Animabile | No. |
| Versione | CSS2 |
| Sintassi DOM | object.style.widows = "3"; |
Sintassi
Valori CSS widows
widows: <integer> | initial | inherit;Esempio della proprietà widows:
Esempio di codice CSS widows
<!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;
}
@media print {
.text {
padding: 20px;
background-color: #fff;
columns: 10em 3;
column-gap: 2em;
text-align: justify;
}
.text p {
widows: 2;
}
}
</style>
</head>
<body>
<h2>Widows 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>
Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry. Lorem Ipsum has been...</strong>
</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>La proprietà widows ha effetto solo in contesti frammentati — media impaginati (anteprima di stampa, @page) o layout CSS multicolonna. In una normale pagina web a scorrimento continuo non ci sono interruzioni di pagina o di colonna, quindi la proprietà non ha nulla su cui agire. L'esempio sopra usa @media print per dimostrarlo: apri l'anteprima di stampa del browser per vedere l'effetto.
Quando si applica e quando no
Affinché widows abbia effetto, devono verificarsi tre condizioni:
- Il contenuto è suddiviso in frammenti — pagine stampate o box multicolonna.
- La proprietà è impostata su un contenitore block (come
<p>o<div>), non su testo inline. - L'interruzione cade all'interno del blocco interessato. Usa page-break-inside (o
break-inside: avoid) quando vuoi impedire che un intero blocco venga diviso.
Il supporto dei browser per widows non è uniforme al di fuori della stampa. I motori di stampa (generazione PDF, anteprima di stampa) lo rispettano ampiamente, mentre il supporto nei layout multicolonna su schermo varia tra i browser, quindi trattalo come un miglioramento progressivo piuttosto che una garanzia.
Valori
| Valore | Descrizione |
|---|---|
<integer> | Specifica il numero minimo di righe che devono rimanere in cima a una pagina o colonna. I valori negativi non sono validi. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento padre. |