CSS break-inside egenskap

Definition och användning

break-inside egenskapen specificerar om sidbrytning (page-break), kolumnbrytning (column-break) eller regionbrytning (region-break) ska inträffa inom det specifika elementet.

break-inside egenskapen utökar CSS2:s page-break-inside egenskap.

Genom att använda break-inside kan du informera webbläsaren att undvika avbrott inom bilder, kodsegment, tabeller och listor.

Exempel

Undvik sidbrytning inom <img> elementet:

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

CSS syntax

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

Egenskapsvärde

Värde Beskrivning
auto Standard. Automatiskt dela sidan, kolumnen och regionen inom elementet.
avoid Undvik att bryta sidan, kolumnen eller regionen inom elementet.
avoid-column Undvik att dela elementet i kolumner.
avoid-page Undvik sidbrytning inom elementet.
avoid-region Undvik att dela elementet i regioner.
initial Sätt detta egenskap till dess standardvärde. Se: initial。
inherit Inherritar detta egenskap från föräldrelementet. Se: inherit。

Tekniska detaljer

Standardvärde: auto
Arv: Nej
Animation: Stöds inte. Se:Animation relaterade egenskaper。
Version: CSS3
JavaScript syntax: object.style.breakInside="always"

Mer exempel

Undvik sidbrytning inom <table>、<ul>、<ol> elementen:

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

Webbläsarstöd

Tal i tabellen anger den första webbläsareversion som helt stöder detta egenskap.

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