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.
Afortunadamente, puede decirle al navegador que mantenga elementos específicos junto con break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Actualmente, la propiedad acepta los valores autoy universalmente avoid.
Úselo avoiden un elemento dentro de un diseño de varias columnas para evitar que la propiedad se rompa.
Eche un vistazo más a la sintaxis de esta propiedad, ya que hay algunas variaciones entre los navegadores.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */La propiedad sigue las propiedades de salto de página y comparte los mismos valores. Por ahora, Firefox usa page-break-inside.
Vea el ejemplo de ruptura dentro de la columna de la pluma (CSS-Tricks) de Katy DeCorah (@katydecorah) en CodePen.
Soporte del navegador
Propiedades de salto de página:
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Soporte de diseño de varias columnas:
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |