Przejdź do treści

Układ wielokolumnowy

Przełamanie kolumny

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12 i 37, Chrome 50)

  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:

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...

Komentarze

Zobacz więcej komentarzy