La propiedad de ruptura interior le permite evitar una ruptura inútil dentro de un contexto de varias regiones, un diseño de varias columnas y en medios paginados. Esta propiedad establece cómo deben comportarse los saltos de región, columna o página dentro de un cuadro generado. Esta propiedad se ignora si no se genera ningún cuadro.
Valor por defecto:
- auto
Sintaxis:
break-inside: Keywor_values; /* Or */ break-inside: Global_values;
Valores de propiedad: Esta propiedad acepta los valores de propiedad mencionados anteriormente y descritos a continuación:
- Keyword_values: Esta propiedad hace referencia a los valores definidos como auto, Avoid, Avoid-Page, Avoid-Column, Avoid-Region, etc.
- Valores_globales: esta propiedad hace referencia a los valores definidos como inicial, heredado, no establecido, etc.
Ejemplo: a continuación se muestra el ejemplo que ilustra el uso de la propiedad de ruptura interna
html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.Container {
column-count: 3;
column-rule: 2px dotted coral;
}
.Container ul {
break-inside: avoid;
}
</style>
</head>
<body>
<h1 style="text-align: center;
color: green;">
GeeksforGeeks
</h1>
<div class="Container">
<h3>Geek</h3>
<p>
Computer Science Portal !!
Computer Science Portal !!
Computer Science Portal !!
Computer Science Portal !!
Computer Science Portal !!
Computer Science Portal !!
</p>
<ul>
<li>Computer Science Portal !!</li>
<li>Computer Science Portal !!</li>
<li>Computer Science Portal !!</li>
<li>Computer Science Portal !!</li>
<li>Computer Science Portal !!</li>
<li>Computer Science Portal !!</li>
</ul>
<p>
Computer Science Portal !!
Computer Science Portal !!
Computer Science Portal !!
Computer Science Portal !!
Computer Science Portal !!
Computer Science Portal !!
</p>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Firefox (compatible parcialmente)
- Ópera
- Safari (compatible parcialmente)
- Borde
- 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