Podemos evitar el salto de columna dentro de un elemento mediante el uso de una propiedad CSS break-inside . La propiedad break-inside en CSS se usa para especificar cómo la columna se divide dentro del elemento. A veces, el contenido de un elemento está atascado entre la columna. Para evitar el salto de columna, debemos usar el conjunto de propiedades break-inside para evitar.
Sintaxis:
column-break-inside:avoid;
Ejemplo: Este ejemplo se utiliza para evitar la ruptura de columna dentro de un elemento.
<html>
<head>
<style>
.x {
-moz-column-count: 3;
column-count: 3;
width: 30em;
}
.x li {
-webkit-column-break-inside: avoid;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<div class='x'>
<ul>
<li>GeeksForGeeks</li>
<li>Sudo Placement</li>
<li>DataBase management System</li>
<li>Operating System</li>
<li>A computer science portal for geeks.</li>
<li>Java Programming</li>
</ul>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA