Propriété CSS widows

La propriété CSS widows spécifie le nombre minimum de lignes d'un conteneur de niveau bloc qui doit rester en haut d'une page ou d'une colonne.

Une veuve est une ligne ou un mot qui apparaît seul en haut d'une page ou d'une colonne.

Cette propriété est principalement utilisée dans les contextes de médias paginés, comme les règles @media print ou @page.

La propriété widows possède une propriété connexe : orphans, qui spécifie le nombre minimum de lignes qui doivent rester en bas de la page ou de la colonne précédente. En d'autres termes, les lignes restantes à la fin de la page précédente sont des orphelins, tandis que les lignes laissées en haut de la nouvelle page sont des veuves.

INFO

Les valeurs négatives sont invalides.

Valeur initiale	2
S'applique à	Éléments conteneurs de bloc.
Héritée	Oui.
Animable	Non.
Version	CSS2
Syntaxe DOM	object.style.widows = "3";

Syntaxe

Valeurs CSS widows

css

widows: <integer> | initial | inherit;

Exemple de la propriété widows :

Exemple de code CSS widows

html

<!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>

Try it Yourself »

note
La propriété widows ne prend effet que dans les médias paginés (par exemple, l'aperçu avant impression). L'exemple utilise @media print pour le démontrer.

Valeurs

Valeur	Description
`<integer>`	Spécifie le nombre minimum de lignes qui doivent rester en haut d'une page ou d'une colonne. Les valeurs négatives sont invalides.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Quelle affirmation est correcte concernant la propriété CSS widows ?

La valeur entière spécifie le nombre de lignes qui peuvent être laissées à la fin d'une page ou d'une colonne.Cette propriété n'est jamais utilisée avec la règle @media.La propriété widows possède une propriété connexe : les orphelins.C'est une propriété animable.

Propriété CSS widows ​

Syntaxe ​

Exemple de la propriété widows : ​

Valeurs ​

Pratique ​

Propriété CSS widows

Syntaxe

Exemple de la propriété widows :

Valeurs

Pratique