La propiedad de ruptura posterior le permite colocar una ruptura en contextos de varias regiones, medios paginados y diseños de varias columnas. Esta propiedad describe cómo se comporta la región, la columna o el salto de página después del cuadro generado. Esta propiedad se ignora si no se genera ningún cuadro.
Sintaxis:
break-after: Generic break values; /* Or */ break-after: Page break values; /* Or */ break-after: Column break values; /* Or */ break-after: Region break values; /* Or */ break-after: Global values;
Valor por defecto: Su valor por defecto es automático.
Valores de propiedad: Esta propiedad acepta los valores de propiedad mencionados anteriormente y descritos a continuación:
- Valores genéricos de ruptura: esta propiedad hace referencia a los valores definidos por auto, evitar, siempre, todos, etc.
- Valores de salto de página: esta propiedad se refiere a los valores definidos por página, evitar-página, izquierda, derecha, anverso, verso, etc.
- Valores de salto de columna: esta propiedad se refiere a los valores definidos por columna, evitar-columna, etc.
- Valores de ruptura de región: esta propiedad hace referencia a los valores definidos por región, región a evitar, etc.
- Valores globales: esta propiedad se refiere a los valores definidos por heredar, inicial, unset, etc.
Ejemplo: a continuación se muestra el ejemplo que ilustra el uso de la propiedad break-after
html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.Container {
column-count: 3;
column-rule: 2px dotted olivedrab;
}
.Container hr {
break-after: column;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green;">
GeeksforGeeks
</h1>
<div class="Container">
<h2>geek 1</h2>
<p>
Computer Science portal 1
Computer Science portal 1
Computer Science portal 1
Computer Science portal 1
Computer Science portal 1
Computer Science portal 1
Computer Science portal 1
Computer Science portal 1
Computer Science
portal 1
</p>
<hr />
<h2>geek 2</h2>
<p>
Computer Science portal 2
Computer Science portal 2
Computer Science portal 2
Computer Science portal 2
Computer Science portal 2
Computer Science portal 2
Computer Science portal 2
Computer Science portal 2
Computer Science
portal 2
</p>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Safari (compatible parcialmente)
- Ópera
- Firefox (parcialmente compatible)
- explorador de Internet
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA