Propiedad orphans de CSS

La propiedad orphans se utiliza para especificar el número mínimo de líneas de un contenedor a nivel de bloque que puede dejarse al final de una página o columna.

Una línea huérfana es la primera línea de un párrafo que aparece sola al final de una página y el párrafo continúa en la página siguiente.

La propiedad orphans se utiliza comúnmente con la regla @media para especificar el número de líneas huérfanas permitidas al final de una página. También se puede utilizar en diseños de varias columnas para páginas web y documentos digitales. En este caso, especificará el número de líneas permitidas al final de una columna.

La propiedad orphans tiene una propiedad hermana: widows, que especifica el número de líneas que aparecen al principio de la página/columna siguiente.

Valor inicial	2
Se aplica a	Elementos contenedores de bloque.
Heredable	No.
Animable	No.
Versión	CSS2
Sintaxis DOM	object.style.orphans = "2";

Sintaxis

Sintaxis CSS de orphans

css

orphans: <integer> | initial | inherit;

Ejemplo de la propiedad orphans:

Ejemplo de código CSS de 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 »

En el ejemplo dado, cuatro líneas del párrafo resaltado en verde se dejan al final de la primera columna.

Valores

Valor	Descripción
`<integer>`	Especifica el número de líneas que pueden dejarse al final de una página o columna. Los valores negativos no son válidos.
initial	Hace que la propiedad utilice su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad 'orphans' en CSS?

Establece el número mínimo de líneas en un contenedor de bloque que debe dejarse al final de una página cuando el contenedor de bloque se divide entre dos páginas.Establece el color de fondo de un elemento.Controla el comportamiento de las tablas.Ajusta el color del texto en un elemento.Establece el número mínimo de líneas en un contenedor de bloque que debe mostrarse en la parte superior de la página siguiente cuando el contenedor de bloque se divide entre dos páginas.

Propiedad orphans de CSS ​

Sintaxis ​

Ejemplo de la propiedad orphans: ​

Valores ​

Práctica ​

Propiedad orphans de CSS

Sintaxis

Ejemplo de la propiedad orphans:

Valores

Práctica