Propiedad CSS page-break-inside
La propiedad CSS page-break-inside define un salto de página dentro de un elemento. Consulta los valores de esta propiedad.
La propiedad CSS page-break-inside controla si se permite un salto de página dentro de un elemento cuando el documento se imprime. Un salto de página es el punto en que el contenido se detiene en una página impresa y continúa en la siguiente. Usa esta propiedad para evitar que un bloque de contenido — un párrafo, una lista, una figura o una fila de tabla — se divida entre dos páginas.
Esta propiedad solo tiene efecto en contextos de medios paginados (impresión, vista previa de impresión o guardado en PDF). No tiene ningún efecto visible en una pantalla normal, donde el contenido se desplaza de forma continua en lugar de fluir en páginas discretas.
Cuándo utilizarla
El caso más habitual es page-break-inside: avoid, que indica al navegador que mantenga un elemento unido en una sola página en lugar de dividirlo. Objetivos típicos:
- Mantener un encabezado adjunto al texto que lo sigue.
- Evitar que una lista, un bloque de código o un
<figure>se parta por la mitad. - Mantener intacta una fila de tabla, una tarjeta o una línea de factura.
Si el elemento es más alto que una página completa, el navegador no puede respetar avoid — el contenido tiene que romperse en algún punto — pero iniciará el elemento en una página nueva para que quede la mayor parte posible junta.
page-break-inside es una propiedad heredada de CSS2. El reemplazo moderno es break-inside, que funciona para páginas impresas, diseños multicolumna y regiones, y admite valores más detallados como avoid-page y avoid-column.
Por compatibilidad con versiones anteriores, los navegadores tratan page-break-inside como un alias de break-inside, por lo que los sitios existentes siguen funcionando. Prefiere break-inside en código nuevo.
| Valor inicial | auto |
|---|---|
| Se aplica a | Elementos de nivel de bloque. |
| Heredada | No. |
| Animable | No. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.pageBreakInside = "avoid"; |
Sintaxis
page-break-inside: auto | avoid | initial | inherit;Debido a que la propiedad solo importa en la impresión, normalmente se define dentro de una regla @media print para que no afecte al diseño en pantalla:
@media print {
/* Don't split tables or figures across pages */
table,
figure {
page-break-inside: avoid;
}
}Ejemplos
page-break-inside con el valor avoid
Aquí se solicita que cada párrafo, lista y sección .list permanezca en una sola página. Al imprimir este documento (o abrir la vista previa de impresión), el navegador evitará dividir cualquiera de esos bloques en un límite de página.
<!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 {
page-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>
<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>page-break-inside con el valor auto
auto es el valor inicial y restaura el comportamiento predeterminado: el navegador puede insertar un salto de página dentro del elemento donde lo necesite. Establecerlo explícitamente es útil para anular una regla avoid heredada o anterior para un elemento específico.
<!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 {
page-break-inside: auto;
}
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>
<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 | Predeterminado. Permite un salto de página dentro del elemento cuando sea necesario. |
avoid | Evita insertar un salto de página dentro del elemento, manteniéndolo unido cuando sea posible. |
initial | Establece la propiedad en su valor predeterminado (auto). |
inherit | Hereda el valor del elemento padre. |
Propiedades relacionadas
page-break-inside forma parte de una familia de propiedades de fragmentación que controlan dónde se rompe el contenido impreso:
page-break-beforeypage-break-after— fuerzan o evitan un salto antes o después de un elemento.break-insideybreak-before— los reemplazos modernos y más capaces que también gestionan diseños multicolumna.
Los saltos de página interactúan estrechamente con los diseños multicolumna creados con las propiedades columns y column-width.
Compatibilidad con navegadores
page-break-inside es compatible con todos los navegadores principales, pero el soporte del valor avoid al imprimir ha sido históricamente inconsistente. Para obtener los resultados más fiables en proyectos nuevos, usa break-inside: avoid, que los navegadores asignan automáticamente a page-break-inside.