break-before

Índice

Definición de .break-before en CSS

La propiedad CSS .break-before es ordenada, ya que permite, hace fuerzas o evita descansos en medios pagados, diseños de múltiples columnas y regiones. Al aplicar la propiedad a un elemento, lo que estamos haciendo es proporcionar una instrucción para romper o evitar descansos entre páginas, columnas y regiones.

Ejemplo de empleo de la propiedad break-before

Si te gustaría utilizar esta propiedad de CSS en tu hoja de estilos, hazlo de la siguiente forma:

break-before: auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region

Otro ejemplo más avanzado de .break-before es el siguiente de CODEPEN:

Sintaxis de .break-before en CSS

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

Valores

Valor Descripción
auto Defecto. Salto automático de página/columna/región antes del elemento
todos Siempre inserte un salto de página justo antes del cuadro principal
siempre Siempre inserte un salto de página antes del elemento
evitar Evite un salto de página/columna/región antes del elemento
evitar-columna Evite un salto de columna antes del elemento
evitar-página Evite un salto de página antes del elemento
evitar-región Evite una ruptura de región antes del elemento
columna Siempre inserte un salto de columna antes del elemento
izquierda Inserte uno o dos saltos de página antes del elemento para que la página siguiente tenga el formato de página izquierda
página Siempre inserte un salto de página antes del elemento
a la derecha Inserte uno o dos saltos de página antes del cuadro principal para que la página siguiente tenga el formato de página recto
región Siempre inserte un salto de región antes del elemento
Correcto Inserte uno o dos saltos de página antes del elemento para que la página siguiente tenga el formato de página derecha
verso Inserte uno o dos saltos de página antes del cuadro principal para que la página siguiente tenga el formato de página inversa
inicial Establece esta propiedad en su valor predeterminado.
heredar Hereda esta propiedad de su elemento principal.

Exploradores compatibles con .break-before

Los números de la tabla especifican la primera versión del navegador que es plenamente compatible con la propiedad.

Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
break-inside 50.0 10.0 65.0 10.0 37.0

Referencias técnicas

No dudes en echar un vistazo a estas otras propiedades de CSS

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso

Otros artículos que te podrían interesar: