CSS属性break-before

Definicja i użycie

Atrybut break-before określa, czy ma miejsce rozdział strony (page-break), rozdział kolumn (column-break) lub rozdział regionu (region-break) przed określonym elementem.

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

Dzięki użyciu break-before, możesz poinformować przeglądarkę, aby przerwała stronę, kolumnę lub obszar przed elementem, na który zastosowano atrybut break-after, lub uniknąć rozdziału elementu na dwóch stronach.

Przykład

Zawsze wstawaj strzałkę do strony przed elementem <h1>:

@media print {
  h1 {
    break-before: zawsze;
  }
}

Język CSS

break-before: 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 wykonywane są przecinki przed elementem, kolumnami i regionami.
all Zawsze natychmiast wstaw znak przecinka przed ramką główną.
always Zawsze wstaw znak przecinka (page-break) przed elementem.
avoid Unikaj przerw w stronach, kolumnach i regionach przed elementem.
avoid-column Unikaj wstawiania znaku przecinka przed elementem.
avoid-page Unikaj wstawiania znaku przecinka przed elementem.
avoid-region Unikaj wstawiania znaku przecinka przed elementem.
column Zawsze wstaw znak przecinka przed elementem.
left Wstaw jeden lub dwa znaki przecinka przed elementem, aby następująca strona była formatowana jako lewa strona.
page Zawsze wstaw znak przecinka przed elementem.
recto Wstaw jeden lub dwa znaki przecinka przed ramką główną, aby następująca strona była formatowana jako strona recto.
region Zawsze wstaw znak przecinka przed elementem.
right Wstaw jeden lub dwa znaki przecinka przed elementem, aby następująca strona była formatowana jako prawy bok.
verso Wstaw jeden lub dwa znaki przecinka przed ramką główną, aby następująca strona była formatowana jako strona verso.
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
Gramatyka JavaScript: object.style.breakBefore="always"

Więcej przykładów

Przykład

Aby upewnić się, że wszystkie nowe rozdziały będą zaczynały się od prawidłowej strony (np. w książce), możesz użyć break-before: dla wszystkich elementów <h1>:

@media print {
  h1 {
    break-before: right;
  }
}

Przykład

Zawsze przed <ul> w regionie wstaw region-break:

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

Obsługa przeglądarki

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