התקנת CSS הפסקה אחרי: guía completa, usos y soporte

עמוד הבית » פיתון » התקנת CSS הפסקה אחרי: guía completa, usos y soporte

Cuando maquetas para impresión, multicolumnas o flujos fragmentados, tarde o temprano te preguntas cómo forzar o evitar que algo salte a la suuiente página o columna. Ahí es donde entra en juego la propiedad CSS break-after , una herramienta que indica al navegador si debe producirse un salto justo después de un elemento.

Más allá de los casos típicos de impresión, break-after es outil en diseños complejos: periódicos digitals con columnas, informes en PDF, documentos con páginas pares e impares y hasta flujos por regiones. Su potencia radica en que puede forzar, permitir o impedir saltos según el contexto: páginas impresas, columnas o regiones.

Qué es la propiedad CSS break after

הרכוש break-after להגדיר si debe producirse un salto de página, columna o región inmediatamente después del elemento al que se aplica. דיכו דה פורמה לאנה, marca un punto de corte justo tras el componente, de modo que el contenido empiece אחורי en la siguiente "unidad" de fragmentación (página, columna o region) según el entorno en el que esté maquetando el navegador.

היסטוריית, ב-CSS 2.1 disponíamos de page-break-after לדפים בינוניים. הוי, break-after amplía ese concepto Para funcionar también con multicolumnas y regiones, además de mantener compatibilidad con los valores clasicos usados ​​en impresión.

Sintaxis, valores y cómo interpretarlos

La forma básica de uso es directa: break-after: <valor>. Estos valores cubren contextos genéricos y específicos de páginas, columnas o regiones:

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

Valores genéricos (válidos en cualquier contexto): auto (ni fuerza ni prohíbe un salto), avoid (כוונה להימנע ממנו), always (fuerza un salto en el contexto de fragmentación inmediato) y all (ניסיוני, fuerza el salto atravesando todos los contextos de fragmentación: por ejemplo, columna y página a la vez si aplica).

Valores para medias pagedos: avoid-page (להימנע ממסירה מהדף), page (כוח משמר העמוד), left y right (fuerzan uno o dos saltos para asegurar que el siguiente contenido comienza en página izquierda o derecha, respectivamente). אדמס, recto y verso son valores experimentales que obligan a que la siguiente página sea recto o verso לפי שיטת השפה.

Valores para diseño multicolumna: avoid-column להימנע ממרח עמודים ו column lo fuerza. En contenidos extensos repartidos por varias columnas, estos valores son clave para no cortar piezas delicadas (como un fragmento de código) o para alinear bloques a la cabecera de la suuiente columna.

ערכים לאזורים: avoid-region y region controlan el salto entre areas definidas por CSS Regions. Aunque esta especificación tuvo tracción en su momento, el soporte real de regiones es limitado en navegadores modernos, por lo que conviene considerar su uso como experimental o de legado.

Reglas decisión del navegador: forzar, evitar y prioridades

En cada punto donde podria producirse una rotura (el "borde" entre elementos), el navegador evalúa tres propiedades: el break-after האלמנט הקדמי, break-before הבא וה break-inside דל מתמודד. Es la interacción de las tres la que determina el resultado.

אל algoritmo, simplificado, funciona así: si alguna de esas propiedades especifica un גבורה פורזאדו (always, left, right, page, column, region), ese valor tiene prioridad. ללא שם: Si hay varios forzados, gana el que está más "adelante" en el flujo: break-before > break-after > break-inside.

Si en ese punto aparece algún גבורת המניעה (avoid, avoid-page, avoid-column, avoid-region), no se aplicará el salto correspondiente. Después de resolver los saltos forzados, el navegador puede añadir "saltos suaves" si lo necesita, pero nunca en límites marcados con valores de evitar.

Relación con page-break-after y compatibilidad histórica

Por motivos de compatibilidad, los navegadores tratan page-break-after כמו שם בדוי break-after en medios paginados. Esto asegura que sitios antiguos que usaban la propiedad clásica sigan comportándose como se esperaba.

La equivalencia de valores funciona de la suuiente manera: auto → auto, always → page, avoid → avoid-page, left → left, right → right. בפועל, puedes escribir ambos para mayor robustez בהדפס:

.elemento {
  page-break-after: always; /* fallback histórico */
  break-after: page;        /* estándar actual */
}

יש גם page-break-before con la misma filosofía en el "lado anterior" del elemento. Usar לפני o after depende del punto exacto donde quieras el corte במוצר שלך.

אפליקציית אפליקציית ותפקוד חזותי

הנכס חל על קופסת רמת בלוק en flujo normal y, por extensiones modernas, a ítems de gridפריטים של flex, grupos de filas de tablas y filas de tabla. No se hereda, su valor inicial es auto y su tipo de animación es discreto (es decir, no interpola como tal en transiciones).

Cuando una página o columna corta una caja, los márgenes, bordes y padding no se dibujan en el punto de corte . La única excepción es el margen inmediatamente posterior a un salto forzado, que se conserva. Este detail ayuda a mantener el espacio visual correcto tras un salto insertado expresamente.

דוגמאות מעשיות לשימוש

Impresión (TOC que siempre termina la página): סי quieres que después del índice de contenidos empiece una página nueva, puedes usar la suuiente regla dentro de un @media print. Es una situación típica en libros o informes donde interesa separar claramente secciones clave:

@media print {
  #tabla-de-contenidos {
    break-after: always;
  }
}

Impresión con página derecha: en publicaciones a doble cara, puede ser necesario que el siguiente capítulo comience en una página derecha. פארה אלו, להשתמש בגבורה right:

@media print {
  #tabla-de-contenidos {
    break-after: right;
  }
}

Multicolumnas: imagina un contenedor con título principal que occupa todas las columnas (column-span: all) y subsecciones que quieres alinear en cabecera de columna. אפליקה break-after: column בבלוק הקודם (לדוגמה, באחד <p> או בכל אחד <section>) para forzar el salto de columna:

main {
  column-width: 200px;
}
h1 {
  column-span: all;
}
section {
  break-after: column; /* cada sección empieza arriba de la siguiente columna */
}

Evitar saltos tras filas de tabla: si quieres mantener una tabla en la misma página cuando sea posible, añade break-after: avoid בפילס. En documentos impresos esto להפחית cortes raros en el cuerpo de una tabla:

tr {
  break-after: avoid;
}

Evitar cortes dentro de un fragmento delicado en columnas: un bloque de código al que no quieres partir entre columnas puede beneficiarse de break-after: column באלמנט הקדמי או מנחה אותו עם break-inside: avoid-column dentro del propio bloque, segun el caso:

.articulo {
  column-width: 12em; /* activa multicolumnas */
}
.articulo .code-snippet {
  break-after: column; /* tras el snippet, siguiente columna */
}

אזורים: si trabajas con flujos por regiones (soporte limitado), puedes indicar que una list termine una region y que el resto fluya en la suuiente. Aunque no es lo más común hoy, sirve como referencia de cómo se pensó la propiedad en ese contexto:

.region ul {
  break-after: region;
}

Adaptación condicional: si deseas que en pantallas pequeñas el comportamiento vuelva a auto para evitar fragmentación agresiva, puedes apoyarte en media שאילתות:

@media screen and (max-width: 768px) {
  h2 {
    break-after: auto;
  }
}

שילוב של פריצה לפני, פריצה אחרי ופריצה פנימה

Estas tres propiedades actúan a la vez. Es habitual, por emplo, usar break-inside: avoid רכיב אחד בשבילו לא משתולל אצל הדם, mientras que una cabecera siguiente declare break-before: page para arrancar en una página nueva. סי אל "לפני" pide un salto, tendrá preferencia sobre el "אחרי" הקודם.

חשוב לדעת: break-before גאנה א break-after, שזכה פעם אחת break-inside. Si varios piden romper, se aplica el del elemento que aparece más tarde en el flujo de documento.

התאמה ותמיכה בהקשר

התמיכה של break-after תלוי בהקשר. En pageción/impresión, los navegadores modernos lo implementan de forma amplia, וכינוי page-break-after mantiene la retrocompatibilidad de sitios antiguos.

בעמודות מרובות, הגבורה column está disponible en motores modernos; חטא אמברגו, en navegadores basados ​​en WebKit ha coexistido el prefijo -webkit-column-break-after como alternativa no estándar. Si apuntas a un público amplio, conviene probar y, si procede, incluir el prefijo de respaldo לעמודות.

Para regiones, el panorama es muy irregular: אזורי CSS לא הושתלו באופן כללי, לפי מה שהערכים region y avoid-region deben considerarse experimentales o de legado.

Un apunte histórico: hubo demostraciones en las que IE10+ mostraba saltos de columna con break-after mientras que navegadores WebKit pedían el prefijo -webkit-column-break-after, ו-Firefox קיים בהקשר זה. Hoy el soporte ha mejorado, pero sigue siendo buena idea contrastar los tres entornos (impresión, columnas y regiones) en los navegadores objetivo.

Buenas prácticas de maquetación con break after

• שימוש במתינות: un "siempre salta" tras cada bloque genera espacios en blanco y maquetaciones poco fluidas. Empléalo solo donde aporte claridad.
• הימנעות מקריטריון: התעללות avoid puede provocar cortes incómodos en otras partes del documento. קומבינלו קון break-inside cuando quieras proteger un componente.
• פרועבאס ו-navegadores y dispositivos: הצג קובץ PDF, ארה"ב La vista previa de impresión y testea multicolumnas. El comportamiento puede variar por motor y contexto.
• פניות מהתקשורת בנוגע לרכוש: hay decisiones de fragmentación que tienen sentido en papel pero no en móvil; ajusta con @media בעת הצורך.

פרטים טכניים וספציפיים

Recapitulando el modelo de la propiedad: ערך ראשוני auto, no heredada, valor computado "tal cual" se especifica y סוג אנימציה דיסקרטית. Aunque su uso típico no implica animaciones, este detalle aclara que no existe transición entre estados de corte הדרגתי.

En cajas divididas por un salto, los bordes, rellenos y márgenes no se "repiten" en el punto de rotura. Se conserva el margen inmediatamente después de un salto forzado , lo cual es útil para mantener la separación del contenido que arranca en la nueva página o columna.

Patrones habituales y trucos (con contexto histórico)

En épocas con soporte irregular, se popularizó un truco: insertar un DIV ואקום עם   ולהקצות אותו page-break-before/after para forzar el salto antes o después del componente real. A día de hoy, no es la solución "bonita", pero puede rescatar maquetaciones de legado donde page-break-* מתפקד טוב יותר break-* en ciertos navegadores antiguos.

El truco solía escribirse así (para provocar un salto antes de una tabla): primero el DIV con salto, luego un párrafo separador y la tabla , de modo que la tabla apareciera al principio de una página nueva al imprimir:

<div style="page-break-before: always;">&nbsp;</div>
<p></p>
<table>
  <tr><td>Contenido...</td></tr>
</table>

Si trabajas con multicolumnas en WebKit קלאסי, recuerda que אל וייחו -webkit-column-break-after aún puede servir como salvavidas junto al valor estándar, por emplo:

figure {
  break-after: column;
  -webkit-column-break-after: always; /* respaldo no estándar */
}

מקרי שימוש מתקדמים

Paginación a doble cara: en libros y revistas, es común exigir que capítulos arranquen siempre en páginas derechas. לשם כך, השתמשו right. Si el contenido siguiente ya caía en una derecha, no habrá salto extra; אני לא, אל נאווגאדור הוספה אחת נוספת עבור cuadrarlo.

Diseños híbridos (páginas con columnas dentro): si estás en una sección multicolumna situada en una página impresa, el valor all puede romper tanto la columna como la página, garantizando que el suuiente bloque empiece limpio en el contexto superior. זה אומץ ניסיוני, כמו כן בדיקה עם מימו.

Reflujo ordenado de secciones: cuando tienes varias secciones que deben comenzar en cabecera de columna, להחיל break-after: column לכל מקטע ayuda a que queden "cuadradas" visualmente, con כותרות מקושרות y sin fragmentos partidos en posiciones incómodas.

Pequeño recordatorio de alias y valores equivalentes

Si todavía mantienes hojas de estilo de impresión con page-break-after, puedes alinearlas con el mundo moderno así: page-break-after: always שווה ערך ל break-after: page; page-break-after: avoid ראה מפה א break-after: avoid-page; left y right conservan su significado. Esto te permite actualizar de forma progresiva.

Para casos donde el navegador no implemente completamente la familia break-* בהקשר קונקרטי, mantener el alias clásico como "fallback" suele ser un movimiento inteligente, sobre todo en proyectos con usuarios que imprimen con navegadores muy variados.

טעויות נפוצות וכיצד להימנע מהן

מקום break-after: always עודף provoca páginas או columnas semi vacías. Antes de forzar, valora si avoid o auto ya ofrecen un corte טבעי מקובל.

התעלמות מהאינטראקציה עם break-inside es otro fallo habitual. אם אין רכיבים, להוסיף break-inside: avoid (o avoid-page/avoid-column) además de manejar el "אחרי" או "לפני" en los elementos adyacentes.

No probar en contexto real es el tercer clasico: la vista previa de impresión no siempre es fiel a cómo quedará el PDF o la impresora física. Genera un PDF, revisa márgenes y asegúrate de que los saltos respetan cabeceras y pies.

פיקה מהירה של הנכס

• התחלתי: auto
• חל על: cajas de bloque, items de grid, items de flex, grupos de filas de tabla y filas
• הרדאדה: לא
• ערך מחושב: כל דבר ספציפי
• סוג אנימציה: בדיד

Por último, recuerda que algunos valores (all, recto, verso) siguen marcados como experimentales en los borradores de especificación. Aunque existen implementaciones parciales, tu estrategia debe כולל תרומות ו"נפילות" כאשר תלויים בהם

לשלוט break-after te permite maquetar documentos que se imprimen bien, columnas ordenadas y flujos de lectura claros. A poco que lo משלב קון break-before y break-inside y tengas en cuenta los alias históricos y los prefijos de respaldo, obtendrás cortes precisos y previsibles sin pelearte con páginas en blanco ni bloques partidos donde no toca.