Atrybut break-inside CSS

Definicja i zastosowanie

Atrybut break-inside określa, czy wewnątrz określonego elementu powinna wystąpić paginacja (page-break), podział na kolumny (column-break) lub podział na sekcje (region-break).

Atrybut break-inside rozszerza atrybut page-break-inside z CSS2.

Używając break-inside, możesz poinformować przeglądarkę, aby unikać przerw wewnątrz obrazów, fragmentów kodu, tabel i list.

Przykłady

Unikaj paginacji wewnątrz elementu <img>:

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

Gramatyka CSS

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

Wartość atrybutu

Wartość Opis
auto Domyślne. Automatyczne paginowanie, podział na kolumny i sekcje wewnątrz elementu.
avoid Unikaj przerw w stronach, kolumnach i obszarach wewnątrz elementu.
avoid-column Unikaj podziału elementu na kolumny.
avoid-page Unikaj paginacji wewnątrz elementu.
avoid-region Unikaj podziału elementu na sekcje.
initial Ustawienie tej właściwości na jej wartość domyślną. Zobacz: initial.
inherit Inherencja tej właściwości od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: auto
Inherencja: Nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Język JavaScript: object.style.breakInside="always"

Więcej przykładów

Unikaj paginacji wewnątrz elementów <table>, <ul>, <ol>:

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

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

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