La Propiedad BREAK-INSIDE
La propiedad break-inside en CSS especifica cómo deben comportarse los saltos de página, de columna o de región dentro del elemento al que se aplica.
La propiedad break-inside en CSS especifica cómo deben comportarse los saltos de página, de columna o de región dentro del elemento al que se aplica. Esta propiedad es útil para controlar si un elemento puede ser dividido por un salto cuando el contenido se distribuye en diferentes contextos de visualización o impresión.
Sintaxis Básica
La sintaxis básica para usar la propiedad break-inside es la siguiente:
selector {
break-inside: <valor>;
}
Donde <valor> puede ser una de las siguientes palabras clave:
Valores de la Propiedad break-inside
La propiedad break-inside acepta diferentes valores dependiendo del contexto en el que se esté utilizando (impresión, diseño en columnas, regiones CSS).
Valores para Saltos de Página (en contextos de impresión)
auto: Este es el valor inicial. El navegador puede insertar saltos de página dentro del elemento si es necesario.avoid: El navegador intenta evitar insertar cualquier tipo de salto (página, columna, región) dentro del elemento.avoid-page: El navegador intenta evitar insertar un salto de página dentro del elemento.
Valores para Saltos de Columna (en diseños multi-columna)
avoid-column: El navegador intenta evitar insertar un salto de columna dentro del elemento.
Valores para Saltos de Región (en Regiones CSS)
avoid-region: El navegador intenta evitar insertar un salto de región dentro del elemento.
Otros Valores
inherit: El elemento hereda el valor de la propiedadbreak-insidede su elemento padre.initial: Establece la propiedad a su valor predeterminado (auto).unset: Restablece la propiedad a su valor heredado si lo hereda de su padre o a su valor inicial si no.
Ejemplos Prácticos
Veamos algunos ejemplos de cómo usar break-inside en diferentes contextos:
Ejemplo 1: Evitar que una tabla se divida entre páginas (para impresión)
Supongamos que tienes una tabla de datos que no quieres que se divida por un salto de página al imprimir. Puedes usar break-inside: avoid; en la tabla:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
break-inside: avoid; /* Intenta evitar que la tabla se divida entre páginas */
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<p>Texto antes de la tabla...</p>
<table>
<thead>
<tr><th>Nombre</th><th>Edad</th></tr>
</thead>
<tbody>
<tr><td>Juan Pérez</td><td>30</td></tr>
<tr><td>María Gómez</td><td>25</td></tr>
<tr><td>Carlos López</td><td>35</td></tr>
</tbody>
</table>
<p>Texto después de la tabla...</p>
</body>
</html>
Cuando imprimas este documento, el navegador intentará mantener toda la tabla en la misma página.
Ejemplo 2: Evitar que un bloque de código se divida entre columnas (en diseño multi-columna)
Si estás utilizando un diseño con múltiples columnas y tienes un bloque de código que quieres mantener junto en la misma columna, puedes usar break-inside: avoid-column;:
<!DOCTYPE html>
<html>
<head>
<style>
.contenedor-columnas {
column-count: 2; /* Divide el contenido en 2 columnas */
column-gap: 20px;
}
.codigo-bloque {
background-color: #f0f0f0;
padding: 15px;
margin-bottom: 15px;
font-family: monospace;
white-space: pre-wrap;
break-inside: avoid-column; /* Intenta evitar que el bloque de código se divida entre columnas */
}
</style>
</head>
<body>
<div class="contenedor-columnas">
<p>Este es un párrafo de texto en la primera columna.</p>
<p>Más texto en la primera columna...</p>
<pre class="codigo-bloque">
<code>
function saludar(nombre) {
console.log(`Hola, ${nombre}!`);
}
saludar("Mundo");
</code>
</pre>
<p>Este es un párrafo que debería estar en la segunda columna.</p>
<p>Más texto para llenar la segunda columna...</p>
</div>
</body>
</html>
En este ejemplo, el navegador intentará mantener todo el bloque de código en la misma columna.
Ejemplo 3: Permitir saltos de página dentro de un elemento (valor predeterminado)
Si tienes un elemento largo, como un párrafo extenso, y quieres permitir que se divida entre páginas si es necesario, puedes dejar el valor predeterminado de break-inside: auto; o especificarlo explícitamente.
<!DOCTYPE html>
<html>
<head>
<style>
.parrafo-largo {
margin-bottom: 20px;
}
</style>
</head>
<body>
<p class="parrafo-largo" style="break-inside: auto;">
Este es un párrafo muy largo de texto que está destinado a ocupar varias líneas y posiblemente varias páginas si se imprime. El navegador tiene la libertad de insertar saltos de página dentro de este elemento según sea necesario para ajustar el contenido al medio de impresión.
... (mucho más texto aquí) ...
</p>
</body>
</html>
Consideraciones Importantes
- La efectividad de
break-inside: avoid;depende del espacio disponible. Si un elemento es demasiado grande para caber en una página o columna restante, el navegador podría verse obligado a dividirlo. - Las propiedades de salto de página son más relevantes cuando se genera una versión impresa de la página.
- Las propiedades de salto de columna solo tienen efecto cuando el elemento padre tiene definida la propiedad
column-countocolumns. - El soporte para las propiedades relacionadas con regiones CSS (
avoid-region) puede ser limitado en algunos navegadores.
Propiedades Relacionadas
Existen otras propiedades CSS que controlan los saltos:
break-before: Especifica cómo debe comportarse un salto de página, de columna o de región antes del elemento.break-after: Especifica cómo debe comportarse un salto de página, de columna o de región después del elemento.
Compatibilidad del Navegador
La compatibilidad con la propiedad break-inside es generalmente buena en los navegadores modernos. Sin embargo, es recomendable verificar la compatibilidad específica de los valores que planeas utilizar, especialmente para las características más avanzadas como las regiones CSS.
Conclusión
La propiedad break-inside te proporciona un control importante sobre cómo se manejan los saltos dentro de los elementos en diferentes contextos de diseño e impresión. Utilizarla correctamente puede mejorar la presentación y la legibilidad de tu contenido, asegurando que elementos importantes como tablas y bloques de código no se dividan de forma inesperada.