Propiedad CSS break-before

La propiedad break-before define cómo deben comportarse los saltos de página o de columna antes del cuadro generado. Si el elemento no genera un cuadro, la propiedad no tiene efecto. Admite valores como auto, avoid, always, page, column, left y right.

Las page-break-inside, page-break-after y page-break-before propiedades ayudan a definir cómo debe aparecer un documento al imprimirlo.

Cuando varias propiedades de salto se aplican al mismo elemento, los saltos forzados (page, column, left, right, always) tienen prioridad sobre los saltos evitables. La propiedad break-before se aplica al propio elemento, mientras que break-inside se aplica a su cuadro principal.

Valor inicial	auto
Se aplica a	Elementos de nivel de bloque.
Heredable	No.
Animable	Discreto.
Versión	CSS3
Sintaxis DOM	object.style.breakBefore = "auto";

Sintaxis

Sintaxis de la propiedad CSS break-before

css

break-before: auto | avoid | always | page | column | left | right | initial | inherit;

Ejemplo de la propiedad break-before:

Ejemplo de la propiedad CSS break-before con el valor avoid

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-before: avoid;
      }
    </style>
  </head>
  <body>
    <h2>Break-before example</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </body>
</html>

Try it Yourself »

Resultado

Valores de la propiedad CSS break-before

Valores

Valor	Descripción
auto	Predeterminado. Permite cualquier salto antes del cuadro principal.
avoid	Evita cualquier salto antes del cuadro principal.
always	Fuerza un salto antes del cuadro principal.
page	Fuerza un salto de página antes del cuadro principal.
column	Fuerza un salto de columna antes del cuadro principal.
left	Fuerza uno o dos saltos de página antes del cuadro principal para que la siguiente página se formatee como una página izquierda.
right	Fuerza uno o dos saltos de página antes del cuadro principal para que la siguiente página se formatee como una página derecha.
initial	Establece esta propiedad en su valor predeterminado.
inherit	Hereda esta propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad CSS 'break-before'?

Crea un salto antes de un elemento.Cambia el color de un elemento.Crea un salto después de un elemento.Influye en los saltos de página, columna o región antes de que se genere un elemento.Modifica la forma de un elemento.

Propiedad CSS break-before ​

Sintaxis ​

Ejemplo de la propiedad break-before: ​

Resultado ​