Przejdź do treści

Przełamanie kolumny {break-before, break-inside, break-after}

Jak zapewnić estetyczne przełamania kolumn tekstu na stronie?

CSS 3

  1. Przełamanie kolumny przed elementem:
    selektor { break-before: column }
  2. Przełamanie kolumny po elemencie:
    selektor { break-after: column }
  3. Blokada przełamania kolumny przed elementem:
    selektor { break-before: avoid-column }
  4. Blokada przełamania kolumny po elemencie:
    selektor { break-after: avoid-column }
  5. Blokada przełamania kolumny wewnątrz elemenu:
    selektor { break-inside: avoid-column }
We wszystkich przypadkach selektorem musi być element blokowy (wstawiony wewnątrz kolumny).

Tekst nie zawsze musi przełamywać się między kolumnami tak, jak byśmy sobie tego życzyli. Możemy np. nie chcieć, aby tytuł znalazł się na końcu kolumny. W takim przypadku estetyczniej będzie wyglądało, jeśli kolumna przełamie się wcześniej, aby tytuł znalazł się na początku następnej. Taki efekt zapewnimy poprzez nadanie stylu:

h1 { break-after: avoid-column }

Z drugiej strony możemy chcieć wymusić przełamanie kolumny po zakończeniu w tekście sekcji, czyli np. zaraz po poziomej linii:

hr { break-after: column }

Wreszcie w pewnych przypadkach może nam zależeć, aby wybrany fragment tekstu - np. akapit - nigdy nie został przełamany do następnej kolumny:

p { break-inside: avoid-column }

Przykład {break-after}

To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. break-after: column;
Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie...

Przeglądarki

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
break-before: wartość50
2016-04-13		65
2019-01-29		12
2015-07-29		37
2016-05-04		10
2016-09-20
break-before: avoid-column≤80
2020-02-04		❌≤80
2020-02-07		≤67
2020-03-03		≤13.1
2020-03-24
break-before: column≤80
2020-02-04		❌≤80
2020-02-07		≤67
2020-03-03		≤13.1
2020-03-24
break-after: wartość50
2016-04-13		65
2019-01-29		12
2015-07-29		37
2016-05-04		10
2016-09-20
break-after: avoid-column≤80
2020-02-04		❌≤80
2020-02-07		≤67
2020-03-03		≤13.1
2020-03-24
break-after: column≤80
2020-02-04		❌≤80
2020-02-07		≤67
2020-03-03		≤13.1
2020-03-24
break-inside: wartość50
2016-04-13		65
2019-01-29		12
2015-07-29		37
2016-05-04		10
2016-09-20
break-inside: avoid-column≤80
2020-02-04		92
2021-09-07		≤80
2020-02-07		≤67
2020-03-03		≤13.1
2020-03-24

Komentarze

Zobacz więcej komentarzy

Facebook