Vedove - Trucchi CSS

Sommario

In termini tipografici, una vedova è l'ultima riga di un paragrafo che viene lasciata sola su una nuova pagina o in una nuova colonna. La widowsproprietà in CSS controlla il numero minimo di righe di un paragrafo che possono cadere in una nuova pagina. Questa proprietà influisce solo sui media paginati come print.

@media print ( p ( widows: 3; ) )

Se un paragrafo non può essere contenuto in una pagina nella sua interezza, viene diviso ovunque sia possibile. In questo modo singole righe di un paragrafo possono apparire sulla pagina prima che continui nella pagina successiva. Questo di solito è indesiderato, quindi molti programmi di videoscrittura richiedono che almeno due righe siano lasciate su una vecchia pagina, invece di una. La orphanproprietà si comporta in modo simile. Puoi dargli un numero positivo (dove 2 è il valore predefinito) o inherit.

Si noti che la widowsproprietà in genere non influisce sui supporti non di paging come screen. Tuttavia, i browser che supportano entrambi widowse columnsapplicheranno la funzionalità prevista anche alle colonne. Inoltre, la proprietà influisce solo sugli elementi a livello di blocco.

In breve, in CSS in particolare:
  • widows= numero minimo di righe in una divisione di paragrafo sulla nuova pagina.
  • orphans= numero minimo di righe in una divisione di paragrafo sulla vecchia pagina.
Le linee rosse sono vedove.

Relazionato

  • orfani

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
25 No 8 12 7

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
88 No 4.4 7.0-7.1

Articoli interessanti...