Atributo break-inside CSS

Definición y uso

El atributo break-inside especifica si debe ocurrir una división de página (page-break), división de columna (column-break) o división de región (region-break) dentro del elemento especificado.

El atributo break-inside extiende el atributo page-break-inside del CSS2.

Al usar break-inside, puede informar al navegador de que desee evitar interrupciones dentro de imágenes, fragmentos de código, tablas y listas.

Ejemplo

Evitar la división de página dentro del elemento <img>:

@media print {
  img {
    display: block;
    break-inside: evitar;
  }
}

Sintaxis de CSS

break-inside: auto|all|siempre|evitar|evitar-columna|evitar-página|evitar-región|columna|izquierda|página|recto|región|derecha|verso|initial|inherit;

Valor del atributo

Valor Descripción
auto Predeterminado. Realizar la división de página, división de columna y división de región automáticamente dentro del elemento.
avoid Evitar la aparición de interrupciones de página, columna o región dentro del elemento.
avoid-column Evitar la división de columna dentro del elemento.
avoid-page Evitar la división de página dentro del elemento.
avoid-region Evitar la división dentro del elemento.
initial Establezca este atributo en su valor predeterminado. Ver: initial.
inherit Hereda este atributo del elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado: auto
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.breakInside="siempre"

Más ejemplos

Evitar la división de página dentro de los elementos <table>、<ul>、<ol>:

@media print {
  table, ul, ol {
    break-inside: evitar;
  }
}

Compatibilidad del navegador

Los números en la tabla indican la primera versión de navegador que admite completamente esta propiedad.

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0