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
| Zastosowanie | Elementy blokowe |
|---|---|
| Obsługiwane wartości | Słowa kluczowe auto, avoid, avoid-page, page, left, right, recto, verso, avoid-column, column, avoid-region, region |
| Wartość początkowa | auto |
| Dziedziczenie | Nie |
| Specyfikacja CSS | CSS Fragmentation Module Level 3, break-before |
