Propiedad CSS break-after

La propiedad CSS break-after controla cómo se comporta un salto de fragmentación después de una caja dada. Un salto de fragmentación es el punto donde el contenido se divide en dos fragmentos — dos páginas impresas, dos columnas de un diseño multicolumna, o dos regiones CSS. Con break-after puedes forzar un salto ("iniciar la siguiente sección en una página/columna nueva") o evitarlo ("mantener este encabezado unido al texto que le sigue").

Admite los siguientes valores: auto, avoid, always, all, page, column, region, avoid-page, avoid-column y avoid-region.

Cuando se aplica a un elemento dentro de un contenedor multicolumna que también está dentro de un contexto paginado, always (y all) fuerza tanto un salto de columna como un salto de página en el mismo límite.

Cuándo usar break-after

Usa break-after cuando el flujo natural del contenido se dividiría en un lugar incómodo:

Hojas de estilo para impresión. Comienza cada sección de nivel superior en una nueva hoja con break-after: page, o evita que el total de una factura quede huérfano al inicio de la página siguiente.
Texto multicolumna. Desplaza un subencabezado al inicio de la siguiente columna en lugar de dejarlo al final de la columna actual.
Regiones CSS / visores de medios paginados. Controla dónde fluye el contenido de un contenedor al siguiente.

break-after solo tiene efecto dentro de un contexto de fragmentación — un documento impreso/paginado, un contenedor column-count/column-width, o una cadena de regiones. En una página con desplazamiento normal no tiene efecto visible, por eso el ejemplo siguiente utiliza un contenedor multicolumna.

Cómo se resuelven las propiedades de salto

Cada límite de elemento está influenciado por tres propiedades:

break-after en el elemento precedente.
break-before en el elemento actual.
break-inside en el elemento padre.

Cuando se aplican varias propiedades de salto, las siguientes reglas de resolución determinan el resultado:

Los saltos forzados (por ejemplo, page, column, always) tienen prioridad sobre los saltos evitados.
Si se aplican varios saltos forzados, break-before tiene precedencia sobre break-after, que tiene precedencia sobre break-inside.
Si cualquier valor aplicable es un salto evitado (avoid, avoid-page, avoid-column o avoid-region), el salto no se aplicará.

Valor inicial	auto
Se aplica a	Elementos de nivel de bloque.
Heredado	No.
Animatable	discrete
Versión	CSS3
Sintaxis DOM	object.style.breakAfter = "always";

Sintaxis

Sintaxis de la propiedad CSS break-after

break-after: auto | avoid | always | all | page | column | region | avoid-page | avoid-column | avoid-region | initial | inherit;

Ejemplo de break-after con salto de columna

En un contenedor de tres columnas, al elemento <hr> se le aplica break-after: column. En lugar de dejar que las columnas se equilibren automáticamente, el navegador termina la columna actual justo después de la regla y continúa el resto del contenido en la siguiente columna — así el segundo bloque "Lorem ipsum" siempre comienza al inicio de una nueva columna.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-after: column;
      }
    </style>
  </head>
  <body>
    <h2>Break-after property example</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de break-after con salto de página

Este es el uso más común en el mundo real: una hoja de estilo para impresión que inicia cada capítulo en su propia página. Abre la vista previa de impresión del navegador (Ctrl/Cmd + P) para ver cada <section> comenzar en una hoja nueva.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      @media print {
        section {
          break-after: page;
        }
      }
    </style>
  </head>
  <body>
    <section>
      <h2>Chapter 1</h2>
      <p>This chapter prints on its own page.</p>
    </section>
    <section>
      <h2>Chapter 2</h2>
      <p>Because the previous section has break-after: page,
         this chapter starts at the top of the next printed page.</p>
    </section>
    <section>
      <h2>Chapter 3</h2>
      <p>And so does this one.</p>
    </section>
  </body>
</html>

Valores

Valor	Descripción
auto	Permite cualquier salto (de página, columna o región) después de la caja principal.
avoid	Evita cualquier salto después de la caja principal.
always	Fuerza un salto después de la caja principal.
all	Fuerza un salto después de la caja principal y de todas las cajas contenedoras del mismo tipo (por ejemplo, todas las columnas o todas las páginas).
page	Fuerza un salto de página después de la caja principal.
column	Fuerza un salto de columna después de la caja principal.
region	Fuerza un salto de región después de la caja principal.
avoid-page	Evita un salto de página después de la caja principal.
avoid-column	Evita un salto de columna después de la caja principal.
avoid-region	Evita un salto de región después de la caja principal.
initial	Establece esta propiedad en su valor predeterminado.
inherit	Hereda esta propiedad de su elemento padre.

Propiedades relacionadas

break-before — controla el salto antes de una caja (tiene precedencia sobre break-after en el mismo límite).
break-inside — evita que una sola caja se divida entre fragmentos.
page-break-after — el alias más antiguo, solo para impresión, mantenido por compatibilidad con versiones anteriores.
columns y column-count — configuran el contexto multicolumna dentro del cual actúan los saltos de columna.

Práctica

¿Cuáles de los siguientes son valores válidos para la propiedad CSS 'break-after'?