Propriété CSS orphans

La propriété orphans est utilisée pour spécifier le nombre minimum de lignes d’un conteneur de niveau bloc qui peuvent être laissées en bas d’une page ou d’une colonne.

Un orphelin est la première ligne d’un paragraphe qui apparaît seule en bas d’une page, tandis que le paragraphe continue sur la page suivante.

La propriété orphans est couramment utilisée avec la règle @media pour spécifier le nombre d’orphelins autorisés à la fin d’une page. Elle peut également être utilisée dans des mises en page multicolonnes pour les pages web et les documents numériques. Dans ce cas, elle spécifie le nombre de lignes autorisées à la fin d’une colonne.

La propriété orphans a une propriété sœur : widows, qui spécifie le nombre de lignes qui apparaissent au début de la page/colonne suivante.

Initial Value	2
Applies to	Block container elements.
Inherited	No.
Animatable	No.
Version	CSS2
DOM Syntax	object.style.orphans = "2";

Syntaxe

Syntaxe CSS de orphans

css

orphans: <integer> | initial | inherit;

Exemple de la propriété orphans :

Exemple de code CSS pour orphans

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;
      }
      .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>

Try it Yourself »

Dans l’exemple donné, quatre lignes du paragraphe surligné en vert sont laissées à la fin de la première colonne.

Valeurs

Value	Description
`<integer>`	Spécifie le nombre de lignes qui peuvent être laissées à la fin d’une page ou d’une colonne. Les valeurs négatives ne sont pas valides.
initial	Utilise la valeur par défaut de la propriété.
inherit	Hérite la propriété de l’élément parent.

Practice

What does the 'orphans' property in CSS do?

It sets the minimum number of lines in a block container that must be left at the bottom of a page when the block container is split between two pages.It sets the background color of an element.It controls the behavior of tables.It adjusts the color of text in an element.It sets the minimum number of lines in a block container that must be shown at the top of the next page when the block container is split between two pages.

Propriété CSS orphans ​

Syntaxe ​

Exemple de la propriété orphans : ​

Valeurs ​

Practice ​

Propriété CSS orphans

Syntaxe

Exemple de la propriété orphans :

Valeurs

Practice