Definición de .break-inside en CSS
Las columnas hacen un gran trabajo al fluir y equilibrar el contenido. Desafortunadamente, no todos los elementos fluyen con gracia. A veces los elementos se atascan entre columnas.
Ejemplo de uso de break-inside
Esta propiedad de CSS normalmente se emplea de la siguiente manera:
li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}Otro ejemplo más avanzado de .break-inside es el siguiente de CODEPEN:
Sintaxis de .break-inside en CSS
break-inside: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;Valores
| Valor | Descripción |
|---|---|
| auto | Defecto. Salto automático de página/columna/región dentro del elemento |
| evitar | Evite un salto de página/columna/región dentro del elemento |
| evitar-columna | Evite un salto de columna dentro del elemento |
| evitar-página | Evite un salto de página dentro del elemento |
| evitar-región | Evite una ruptura de región dentro del elemento |
| inicial | Establece esta propiedad en su valor predeterminado. |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .break-inside
Los números de la tabla especifican la primera versión del navegador que es plenamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| caption-side | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
