break-inside

Ejemplos

Ejemplo básico

Usa utilidades como break-inside-column y break-inside-avoid-page para controlar cómo un salto de columna o página debe comportarse dentro de un elemento:

<div class="columns-2">
  <p>Bueno, déjame decirte algo, ...</p>
  <p class="break-inside-avoid-column">Claro, adelante, ríete...</p>
  <p>Tal vez podamos vivir sin...</p>
  <p>Mira. Si crees que esto es...</p>
</div>

Diseño Responsive

Prefija una utilidad break-inside con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="break-inside-avoid-column md:break-inside-auto ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.