W3docs
es
Iniciar sesión

Propiedad page-break de CSS

The CSS page-break property is a set of three properties:page-break-before, page-break-after and page-break-inside. Read about property, see examples.

En realidad, no existe una propiedad page-break en la especificación de CSS. Es un conjunto de tres propiedades: page-break-inside, page-break-before y page-break-after. Estas propiedades definen el comportamiento del documento al imprimirlo. Ninguna de ellas puede usarse en un <div> vacío ni en elementos posicionados de forma absoluta.

page-break-after

La propiedad page-break-after define un salto de página después del elemento.

warning

La propiedad page-break-after ha sido reemplazada por la propiedad break-after.

Usa el siguiente ejemplo de código para definir un salto de página después del elemento:

Ejemplo de código CSS page-break-after

@media print {
  footer {
    page-break-after: left;
    /* modern equivalent: break-after: left; */
  }
}

page-break-before

La propiedad page-break-before define un salto de página antes del elemento.

warning

La propiedad page-break-before ha sido reemplazada por la propiedad break-before.

Usa el siguiente ejemplo de código para definir un salto de página antes del elemento:

Ejemplo de código CSS page-break-before | W3Docs

@media print {
  h2 {
    page-break-before: right;
    /* modern equivalent: break-before: right; */
  }
}

page-break-inside

La propiedad page-break-inside define el salto de página dentro del elemento.

warning

La propiedad page-break-inside ha sido reemplazada por la propiedad break-inside.

Ejemplo de la propiedad break-inside:

El siguiente ejemplo utiliza la propiedad moderna break-inside, que reemplaza a la obsoleta page-break-inside.

Ejemplo de las propiedades CSS page-break y break-inside | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 90px;
        width: 200px;
        columns: 1;
        column-width: 80px;
      }
      .list,
      ol,
      ul,
      p {
        break-inside: avoid;
      }
      p {
        background-color: #8ebf42;
      }
      ol,
      ul,
      .list {
        margin: 0.5em 0;
        display: block;
        background-color: #1c87c9;
      }
      p:first-child {
        margin-top: 1em;
      }
    </style>
  </head>
  <body>
    <h2>Page-break property example</h2>
    <div class="example">
      <p>The first paragraph.</p>
      <section class="list">
        <span>A list</span>
        <ol>
          <li>one</li>
        </ol>
      </section>
      <ul>
        <li>one</li>
      </ul>
      <p>The second paragraph.</p>
      <p>The third paragraph, it contains more text.</p>
      <p>The fourth paragraph. It has a little bit more text than the third one.</p>
    </div>
  </body>
</html>
Pruébalo tú mismo »

Valores

ValorDescripción
autoSalto de página automático. Este es el valor predeterminado.
alwaysFuerza siempre un salto de página después del elemento.
avoidEvita un salto de página después del elemento.
leftFuerza un salto de página después del elemento, de modo que la página siguiente se formatee como una página izquierda.
rightFuerza un salto de página después del elemento, de modo que la página siguiente se formatee como una página derecha.
initialHace que la propiedad use su valor predeterminado.
inheritHereda la propiedad de su elemento padre.

Nota: Los valores always, left y right solo se aplican a page-break-before y page-break-after. page-break-inside solo acepta auto y avoid.

Práctica

Práctica

¿Cuál es la función de la propiedad 'page-break' en CSS?