Atributo break-before de CSS

Definición y uso

La propiedad break-before 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) antes del elemento especificado.

La propiedad break-before extiende la propiedad page-break-before de CSS2.

Al usar break-before, puede informar al navegador de que debe interrumpir la página, la columna o la región antes 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

Inserte un separador de página antes del elemento <h1>:

@media print {
  h1 {
    break-before: siempre;
  }
}

Sintaxis de CSS

break-before: 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. Realizar automáticamente división de página, división de columna, y división de región antes del elemento.
all Siempre insertar un salto de página inmediatamente antes del cuadro principal.
always Siempre insertar un salto de página (page-break) antes del elemento.
avoid Evitar la división de página, columna, o región antes del elemento.
avoid-column Evitar la división de columna antes del elemento.
avoid-page Evitar la división de página antes del elemento.
avoid-region Evitar la división de región antes del elemento.
columna Siempre insertar un separador de columna antes del elemento.
izquierda Insertar uno o dos símbolos de salto de página antes del elemento para formatear la siguiente página como página de izquierda.
página Siempre insertar un salto de página antes del elemento.
recto Insertar uno o dos símbolos de salto de página antes del cuadro principal para formatear la siguiente página como página de recto.
región Siempre insertar un separador de región antes del elemento.
derecha Insertar uno o dos símbolos de salto de página antes del elemento para formatear la siguiente página como página de derecha.
verso Insertar uno o dos símbolos de salto de página antes del cuadro principal para formatear la siguiente página como página de verso.
initial Establece este atributo a 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.breakBefore="always"

Más ejemplos

Ejemplo

Para asegurar que todos los nuevos capítulos comiencen en la página correcta (como en un libro), puede usar break-before: en todos los elementos <h1>:

@media print {
  h1 {
    break-before: right;
  }
}

Ejemplo

Siempre insertar un region-break: antes de <ul> dentro de region:

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

Compatibilidad del navegador

Los números en la tabla indican la primera versión de navegador que completamente soporta esta propiedad.

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