Własność CSS break-before

> Dodaj do ulubionych

Własność CSS break-before określa sposób łamania kolumn, stron lub regionów przed wybranym elementem znajdującym się w ich treści.

Wartości i składnia

Własność break-before może być używana w paru różnych kontekstach fragmentarycznych i dlatego obsługuje kilka zestawów wartości.

Wartości generyczne

Te wartości mogą być używane w każdym kontekście fragmentarycznym.

auto
Pozwala na złamanie treści przed danym elementem, ale nie wymusza tego.
avoid
Nakazuje unikać łamania treści przed danym elementem.

Wartości kolumnowe

Te wartości działają tylko w układach wielokolumnowych CSS, czyli na elementy znajdujące się wewnątrz kolumn w kontenerach wielokolumnowych.

avoid-column
Unika złamania kolumny przed danym elementem.
column
Zawsze wymusza złamanie kolumny przed danym elementem.

Wartości stronicowe

Te wartości działają tylko w kontekstach stronicowanych.

avoid-page
Unika złamania strony przed danym elementem.
page
Zawsze wymusza złamanie strony przed danym elementem.
left
Wymusza jedno lub dwa złamania strony przed danym elementem, tak aby następna strona była sformatowana jako lewa.
right
Wymusza jedno lub dwa złamania strony przed danym elementem, tak aby następna strona była sformatowana jako prawa.
recto
Wymusza jedno lub dwa złamania strony przed danym elementem, tak aby następna strona była sformatowana jako prawa w kontekście rozłożonej książki (w przypadku tekstu w takich językach, jak polski).
verso
Wymusza jedno lub dwa złamania strony przed danym elementem, tak aby następna strona była sformatowana jako lewa w kontekście rozłożonej książki (w przypadku tekstu w takich językach, jak polski).

Wartości regionowe

Te wartości działają tylko w kontekstach wieloregionowych.

avoid-region
Unika złamania regionu przed danym elementem.
column
Zawsze wymusza złamanie regionu przed danym elementem.

Przykłady

W poniższym przykładzie element aside zawsze będzie pierwszy w kolumnie w układzie wielokolumnowym CSS, ponieważ ustawiliśmy przed nim wymuszone złamanie kolumny.


aside {
  break-before: column;
}

Podsumowanie

ZastosowanieElementy blokowe
Obsługiwane wartościSłowa kluczowe auto, avoid, avoid-page, page, left, right, recto, verso, avoid-column, column, avoid-region, region
Wartość początkowaauto
DziedziczenieNie
Specyfikacja CSSCSS Fragmentation Module Level 3, break-before
Jajko z dzwonkiem

Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.