Atributo break-after de CSS

Definición y uso

La propiedad break-after especifica si debe ocurrir una página de ruptura (page-break), una ruptura de columna (column-break) o una ruptura de región (region-break) después del elemento especificado.

La propiedad break-after amplía la propiedad page-break-after de CSS2.

Al usar break-after, puede informar al navegador de que debe interrumpir la página, la columna o la región después del elemento al que se aplica la propiedad break-after, o evitar que el elemento se rompa y se extienda a dos páginas.

Ejemplo

Siempre inserte un salto de página antes del elemento <footer>:

@media print {
  footer {
    break-after: always;
  }
}

Sintaxis de CSS

break-after: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Valor del atributo

Valor Descripción
auto Predeterminado. Realice automáticamente la paginación, división de columna y división de región después del elemento.
all Siempre inserte un salto de página inmediatamente después del cuadro principal.
always Siempre inserte un salto de página después del elemento.
avoid Evite la interrupción de página, columna, o región después del elemento.
avoid-column Evite la división de columna después del elemento.
avoid-page Evite la paginación después del elemento.
avoid-region Evite la división después del elemento.
columna Siempre inserte un separador de columna después del elemento.
izquierda Inserte uno o dos saltos de página después del elemento para formatear la próxima página como página de izquierda.
página Siempre inserte un salto de página después del elemento.
recto Inserte uno o dos saltos de página al final del cuadro principal para formatear la próxima página como página de recto.
región Siempre inserte un separador de región después del elemento.
derecha Inserte uno o dos saltos de página después del elemento para formatear la próxima página como página de derecha.
verso Inserte uno o dos saltos de página al final del cuadro principal para formatear la próxima página como página de verso.
initial Establezca este atributo en su valor predeterminado. Ver: initial.
inherit Hereda este atributo de su elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado: auto
Herencia: No
Producción de animación: No soportado. Ver:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.breakAfter="always"

Más ejemplos

Ejemplo

Siempre inserte un salto de página después del elemento con id "toc":

@media print {
  #toc {
    break-after: always;
  }
}

Ejemplo

Siempre inserte un separador de región después del elemento <ul> en alguna región:

.region ul {
    break-after: region;
  }
}

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente esta propiedad.

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0