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 |