- ব্রেক-আফটার কন্ট্রোল সল্টোস ট্রাস আন এলিমেন্টো en páginas, columnas y regiones, con valores para forzar, evitar o ajustar el contexto.
- প্রথম দিকে ব্রেক-আগে সোব্রে ব্রেক-আফটার এবং সোব্রে ব্রেক-ইনসাইড; অস্তিত্ব valores forzados y de evitar que condicionan el corte.
- পৃষ্ঠা-ব্রেক-পরে actúa como alias en impresión; conviene usarlo como fallback Junto a break-after en proyectos con soporte variado.
Cuando maquetas para impresión, multicolumnas o flujos fragmentados, tarde o temprano te preguntas cómo forzar o evitar que algo salte a la siguiente página o columna. Ahí es donde entra en juego la propiedad CSS ব্রেক-আফটার, 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 útil en diseños complejos: periódicos digitales 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.
CSS ব্রেক-আফটার প্রোপিডেড
সম্পত্তি 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 posterior empiece en la siguiente “unidad” de fragmentación (পৃষ্ঠা, columna o región) según el entorno en el que esté maquetando el navegador.
হিস্টোরিকামেন্ট, en CSS 2.1 ডিস্পোনিয়ামোস ডি page-break-after মিডিয়া পৃষ্ঠাগুলির জন্য। হায়, ব্রেক-আফটার এর ধারণা para funcionar también con multicolumnas y regiones, además de mantener compatibilidad con los valores clásicos usados en impresión.
Sintaxis, valores y cómo interpretarlos
লা ফর্মা বেসিকা ডি ইউসো এস ডিরেক্ট: break-after: <valor>. এস্টোস ভ্যালোরস কিউব্রেন কনটেক্সটোস জেনেরিকস এবং স্পেসিফিকোস ডি পেজিনাস, কলাম বা অঞ্চলগুলি:
break-after: auto | avoid | always | all |
avoid-page | page | left | right | recto | verso |
avoid-column | column |
avoid-region | regionValores 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: 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 ছেলে valores experimentales que obligan a que la siguiente página sea recto o verso ভাষায় ফ্লুজোর চিহ্ন।
ডিজাইনের মাল্টিকোলামার ভ্যালোরস: 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 siguiente columna.
অঞ্চল অনুসারে মূল্য: avoid-region y region সিএসএস অঞ্চলের জন্য নিয়ন্ত্রন করা হয়। 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 পরীক্ষামূলক o de legado.
Reglas de decisión del navegador: Forzar, evitar y prioridades
En cada punto donde podría 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.
El algoritmo, simplificado, funciona así: si alguna de esas propiedades especifica un বীরত্বপূর্ণ ভয় (always, left, right, page, column, region), ese বীরত্ব tiene preoridad. 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 solver los saltos forzados, el navegador puede añadir “saltos suaves” si lo necesita, pero nunca en límites marcados con valores de evitar.
পৃষ্ঠা-ব্রেক-আফটার y কম্প্যাটিবিলিডাড হিস্টোরিকা সম্পর্কে সম্পর্ক
Por motivos de compatibilidad, los navegadores tratan page-break-after যেমন একটি উপনাম break-after মিডিয়া পাতা. Esto asegura que sitios antiguos que usaban la propiedad clásica sigan comportándose como se esperaba.
La equivalencia de valores funciona de la siguiente manera: auto → auto, always → page, avoid → avoid-page, left → left, right → right. প্রস্তুতিতে, puedes escribir ambos প্যারা মেয়র 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. ইউসার আগে ও পরে নির্ভরশীল দেল পুন্টো এক্সাক্টো ডন্ডে কুইরাস এল কোর্ট তোমার ম্যাকেটাসিওন।
অ্যাম্বিটো ডি অ্যাপ্লিকেশান এবং কমপোর্টামিয়েন্টো ভিজ্যুয়াল
একটি অ্যাপ্লিকেশনের জন্য সম্পত্তি ব্লকের নিভল en flujo normal y, por extensiones modernas, a ítems de grid, এর উদাহরণ flex, grupos de filas de tablas y filas de tabla. কোন সে হেরেডা, su valor inicial es auto y su tipo de animación es discreto (es decir, no interpola como tal en transiciones)
Cuando una পৃষ্ঠা o columna corta una caja, los margenes, 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 detalle ayuda a mantener el espacio visual correcto tras un salto insertado expresamente.
ব্যবহারের ব্যবহারিক উদাহরণ
ইমপ্রেসিওন (TOC que siempre termina la página): si quieres que después del índice de contenidos empiece una página nueva, puedes usar la siguiente 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;
}
}ইমপ্রেসিওন কন পেজিনা ডেরেচা: 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;
}
}মাল্টিকোলামনাস: ইমেজিনা আন কনটেনেডর কন টিটুলো প্রিন্সিপাল কিউ অকুপা টডাস লাস কলাম (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, según 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 lista termine una región y que el resto fluya en la siguiente. Aunque no es lo más común hoy, sirve como referencia de cómo se pensó la propiedad এই প্রসঙ্গে:
.region ul {
break-after: region;
}অভিযোজন শর্তাধীন: si deseas que en pantallas pequeñas el comportamiento vuelva a auto প্যারা এভিটার ফ্র্যাগমেন্টেশন এগ্রেসিভা, puedes apoyarte en মিডিয়া প্রশ্ন:
@media screen and (max-width: 768px) {
h2 {
break-after: auto;
}
}Cómo se combinan ব্রেক-আগে, ব্রেক-পরে y ব্রেক-ইনসাইড
এস্টাস ট্রেস প্রোপিডেড অ্যাক্টুয়ান এ লা ভেজ। এটা অভ্যাসগত, উদাহরণস্বরূপ, ব্যবহার break-inside: avoid একটি উপাদানের জন্য নো সে রোম্পা পোর ডেন্ট্রো, mientras que una cabecera siguiente ঘোষণা break-before: page para arrancar en una página nueva. সি এল "আগে" পিডে আন সালতো, tendrá preferencia sobre el “পরে” previo.
গুরুত্বপূর্ণ মন্তব্যের অগ্রাধিকার: break-before গণ আ break-after, que a su vez gana a break-inside. Si varios piden romper, se aplica el del elemento que aparece más tarde en el flujo de documento.
প্রেক্ষাপটে সামঞ্জস্যপূর্ণ
এর সমর্থন break-after প্রসঙ্গ নির্ভর। পৃষ্ঠা/ইম্প্রেশনে, los navegadores modernos lo implean de forma amplia, y el alias সম্পর্কে page-break-after ম্যান্টিয়েন লা রেট্রোকম্প্যাটিবিলিডাড ডি সিটিওস অ্যান্টিগুস।
বহুস্তম্ভে, বীরত্বপূর্ণ column está disponible en motores modernos; sin bargo, 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 কলামের জন্য।
প্যারা অঞ্চল, প্যানোরামা অনেক অনিয়মিত: সিএসএস অঞ্চল কোন সাধারণ ফর্মা ইমপ্লান্টাডো নেই, পোর লো কু লস ভ্যালোরেস region y avoid-region deben considerarse experimentales o de legado.
Un apunte histórico: hubo demostraciones en las que IE10+ মোস্টরাবা সল্টোস ডি কলাম কন ব্রেক-আফটার mientras que navegadores WebKit pedian el prefijo -webkit-column-break-after, y Firefox se quedaba atrás en ese contexto. Hoy el soporte ha mejorado, pero sigue siendo buena idea contrastar los tres entornos (impresión, columnas y regiones) en los navegadores objetivo.
ব্রেক-আফটারে ব্যবহারিক পদ্ধতি
- এটি পরিমিতভাবে ব্যবহার করুন: un “siempre salta” tras cada bloque genera espacios en blanco y maquetaciones poco fluidas. Empléalo solo donde aporte claridad.
- মানদণ্ড বাদ দিন: অপব্যবহার
avoidpuede provocar cortes incómodos en otras partes del documento. কম্বিনালো কনbreak-insidecuando quieras proteger un componente. - Pruebas en navegadores y dispositivos: ইমপ্রাইম একটি পিডিএফ, ইউএসএ লা ভিস্তা প্রিভিয়া ডি ইমপ্রেসিওন এবং টেস্টিয়া মাল্টিকলামনাস। El comportamiento puede variar por motor y contexto.
- ক্যাবেজার সাথে মিডিয়া প্রশ্ন: খসখস সিদ্ধান্ত 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, valour computado “tal cual” se especifica y গোপন অ্যানিমেশনের ধরণ. Aunque su uso típico no implica animaciones, est detalle aclara que no existe transición graduual entre estados de corte.
En cajas divididas por un salto, los bordes, rellenos y margenes 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 ডিআইভি ভ্যাকুয়াম কন এবং এটি বরাদ্দ করুন page-break-before/after প্যারা ফরজার এল সালটো আন্তেস ও ডেসপুয়েস দেল কম্পোনেন্ট রিয়েল। 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;"> </div>
<p></p>
<table>
<tr><td>Contenido...</td></tr>
</table>ওয়েবকিট ক্লাসিকে মাল্টিকলমনাস, রিকুয়ের্দা কিউ পুরাতন -webkit-column-break-after aún puede servir como salvavidas junto al valor estándar, por ejemplo:
figure {
break-after: column;
-webkit-column-break-after: always; /* respaldo no estándar */
}উন্নত ব্যবহারের ক্ষেত্রে
পেজিনাসিওন এ ডবল ক্যারা: 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; si no, el navegador insertará uno adicional para cuadrarlo.
ডিজাইন হাইব্রিডোস (পৃষ্ঠাগুলি কন কলাম ডেন্ট্রো): 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 siguiente 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 positiones 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 সংরক্ষন সু তাৎপর্যপূর্ণ. এসো te permite actualizar de forma progresiva.
প্যারা casos Donde el navegador কোন বাস্তবায়ন সম্পূর্ণতা la familia break-* একটি নির্দিষ্ট প্রসঙ্গে, ম্যান্টেনার এল ওরফে ক্লাসিকো কোমো "ফলব্যাক" suele ser un movimiento intelligente, sobre todo en proyectos con usuarios que imprimen con navegadores muy variados.
সাধারণ ভুলগুলি এবং কীভাবে সেগুলি এড়ানো যায়
জায়গা break-after: always অতিরিক্ত provoca páginas or columnas semi vacías. Antes de Forzar, valora si avoid o auto ya ofrecen un corte প্রাকৃতিক গ্রহণযোগ্য.
ইন্টারঅ্যাকশন সম্পর্কে অবগত নন break-inside es otro fallo অভ্যাসগত. Si un componente no debe dividirse, যোগ করা break-inside: avoid (o avoid-page/avoid-column) además de manejar el “পরে” বা “আগে” en los elementos adyacentes.
কোন প্রবার en contexto real es el tercer clásico: la vista previa de impresión no siempre es fiel একটি পিডিএফ বা ইমপ্রেসোরা ফিসিকা। Genera un PDF, revisa margenes y asegúrate de que los saltos respetan cabeceras y pies.
ফিচা র্যাপিডা দে লা প্রোপিয়েড
- প্রাথমিক:
auto - প্রযোজ্য: cajas de bloque, ítems de grid, ítems de flex, grupos de filas de tabla y filas
- উত্তরাধিকারসূত্রে: না।
- বীরত্ব গণনা: নির্দিষ্টকরণের জন্য নির্দিষ্টকরণ
- অ্যানিমেশনের ধরণ: বিচক্ষণ
Por ultimo, recuerda que algunos valores (all, recto, verso) siguen marcados como experimentales en los borradores de especificación. Aunque existen impleaciones parciales, আপনি স্ট্র্যাটেজিয়া ডিবে ইনক্লুয়ার প্রুবাস এবং "ফলব্যাকস" তাদের উপর নির্ভরশীলতা কত?
শাসন করতে break-after te permite maquetar documentos que se imprimen bien, columnas ordenadas y flujos de lectura claros. একটি poco que lo সম্মিলন con 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.
