Propiedad page-break de CSS
En realidad, no existe una propiedad page-break en la especificación de CSS. Es un conjunto de tres propiedades: page-break-inside, page-break-before y page-break-after. Estas propiedades definen el comportamiento del documento al imprimirlo. Ninguna de ellas puede usarse en un <div> vacío ni en elementos posicionados de forma absoluta.
page-break-after
La propiedad page-break-after define un salto de página después del elemento.
WARNING
La propiedad page-break-after ha sido reemplazada por la propiedad break-after.
Usa el siguiente ejemplo de código para definir un salto de página después del elemento:
Ejemplo de código CSS page-break-after
@media print {
footer {
page-break-after: left;
/* modern equivalent: break-after: left; */
}
}page-break-before
La propiedad page-break-before define un salto de página antes del elemento.
WARNING
La propiedad page-break-before ha sido reemplazada por la propiedad break-before.
Usa el siguiente ejemplo de código para definir un salto de página antes del elemento:
Ejemplo de código CSS page-break-before | W3Docs
@media print {
h2 {
page-break-before: right;
/* modern equivalent: break-before: right; */
}
}page-break-inside
La propiedad page-break-inside define el salto de página dentro del elemento.
WARNING
La propiedad page-break-inside ha sido reemplazada por la propiedad break-inside.
Ejemplo de la propiedad break-inside:
El siguiente ejemplo utiliza la propiedad moderna break-inside, que reemplaza a la obsoleta page-break-inside.
Ejemplo de las propiedades CSS page-break y break-inside | W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 90px;
width: 200px;
columns: 1;
column-width: 80px;
}
.list,
ol,
ul,
p {
break-inside: avoid;
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1em;
}
</style>
</head>
<body>
<h2>Page-break property example</h2>
<div class="example">
<p>The first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
</ol>
</section>
<ul>
<li>one</li>
</ul>
<p>The second paragraph.</p>
<p>The third paragraph, it contains more text.</p>
<p>The fourth paragraph. It has a little bit more text than the third one.</p>
</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| auto | Salto de página automático. Este es el valor predeterminado. |
| always | Fuerza siempre un salto de página después del elemento. |
| avoid | Evita un salto de página después del elemento. |
| left | Fuerza un salto de página después del elemento, de modo que la página siguiente se formatee como una página izquierda. |
| right | Fuerza un salto de página después del elemento, de modo que la página siguiente se formatee como una página derecha. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Nota: Los valores always, left y right solo se aplican a page-break-before y page-break-after. page-break-inside solo acepta auto y avoid.
Práctica
¿Cuál es la función de la propiedad 'page-break' en CSS?