CSS property break-after

Definicja i użycie

Atrybut break-after określa, czy po określonym elemencie powinna nastąpić przerwa strony (page-break), przerwa kolumny (column-break) lub przerwa regionu (region-break).

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

Używając break-after, możesz poinformować przeglądarkę, aby przerwała stronę, kolumnę lub obszar po elemencie, na którym zastosowano atrybut break-after, lub uniknąć rozdziału elementu na dwóch stronach.

Przykład

Zawsze przed elementem <footer> wstaw znak podziału strony:

@media print {
  footer {
    break-after: always;
  }
}

Gramatyka CSS

break-after: 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. Automatycznie podziel stronę, kolumny i regiony po elemencie.
all Zawsze natychmiast po głównej ramce wstaw znak podziału strony.
always Zawsze po elemencie wstaw znak podziału strony.
avoid Unikaj przerw w stronach, kolumnach i regionach po elemencie.
avoid-column Unikaj podziału kolumn po elemencie.
avoid-page Unikaj podziału strony po elemencie.
avoid-region Unikaj podziału po elemencie.
column Zawsze po elemencie wstaw znak podziału kolumn.
left Wstaw jeden lub dwa znaki podziału strony po elemencie, aby następna strona była formatowana jako strona lewostronna.
page Zawsze po elemencie wstaw znak podziału strony.
recto Wstaw jeden lub dwa znaki podziału strony po głównej ramce, aby następna strona była formatowana jako strona lewostronna.
region Zawsze po elemencie wstaw znak podziału regionu.
right Wstaw jeden lub dwa znaki podziału strony po elemencie, aby następna strona była formatowana jako strona prawostronna.
verso Wstaw jeden lub dwa znaki podziału strony po głównej ramce, aby następna strona była formatowana jako strona verso.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Przypisuj tę właściwość wartości jej wartości domyślnej. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: auto
Inherdowanie: Nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Gramatyka JavaScript: object.style.breakAfter="always"

Więcej przykładów

Przykład

Zawsze po elemencie o id "toc" wstaw znak podziału strony:

@media print {
  #toc {
    break-after: always;
  }
}

Przykład

Zawsze po elemencie <ul> w danej obszarze wstaw znak podziału:

.region ul {
    break-after: region;
  }
}

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