CSS break-binnen eigenschap

Definitie en gebruik

De eigenschap break-inside bepaalt of er binnen een specifiek element paginering (page-break), kolomdeling (column-break) of regio-deling (region-break) moet plaatsvinden.

De eigenschap break-inside breidt de eigenschap page-break-inside van CSS2 uit.

Door break-inside te gebruiken, kunt u de browser informeren om in beelden, codefragmenten, tabellen en lijsten geen onderbrekingen te maken.

Voorbeeld

Voorkom paginering binnen <img> elementen:

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

CSS syntaxis

break-inside: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
auto Standaard. Voer paginering, kolomdeling en regio-deling automatisch binnen elementen uit.
avoid Voorkom dat er in elementen pagina's, kolommen of regio's worden onderbroken.
avoid-column Voorkom het opdelen van elementen in kolommen.
avoid-page Voorkom het pagineren binnen elementen.
avoid-region Voorkom het opdelen van elementen.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Van zijn ouder-element deze eigenschap overnemen. Raadpleeg inherit.

Technische details

Standaardwaarde: auto
Inheritantie: Nee
Animatieproductie: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.breakInside="always"

Meer voorbeelden

Voorkom paginering binnen <table>、<ul>、<ol> elementen:

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

browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

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