Propiedad CSS break-after

La propiedad CSS break-after define cómo deben comportarse los saltos de página, columna o región después de la caja generada. 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 multicol que también está dentro de un contenedor de página, fuerza un salto de columna y de página.

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 múltiples 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 evitables.
Si se aplican varios saltos forzados, break-before tiene precedencia sobre break-after, que a su vez tiene precedencia sobre break-inside.
Si algún valor aplicable es un salto evitable (avoid, avoid-page, avoid-column o avoid-region), el salto no se aplicará.

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

Sintaxis

Sintaxis de la propiedad CSS break-after

css

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

Ejemplo de la propiedad break-after:

Ejemplo de la propiedad CSS break-after con el valor column

html

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

Try it Yourself »

Resultado

Valores de la propiedad CSS break-after

Valores

Valor	Descripción
auto	Permite cualquier salto (página, columna, 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.

Propiedad CSS break-after ​

Sintaxis ​

Ejemplo de la propiedad break-after: ​

Resultado ​

Valores ​

Práctica ​

Propiedad CSS break-after

Sintaxis

Ejemplo de la propiedad break-after:

Resultado

Valores

Práctica