Łączenie kolumn {column-span}
W jaki sposób wstawić element rozciąjący się ponad kilkoma kolumnami tekstu?
CSS 3
selektor { column-span: all }Aby odwołać łączenie kolumn, należy podać wartość none.
Zdarzają się sytuacje, kiedy chcemy wyskoczyć z ustalonego podziału tekstu na kolumny. Może to mieć miejsce np. w przypadku tytułów, które rozpoczynają kolejny artykuł albo nową sekcję w artykule. Mamy możliwość rozciągnięcia tytułu na szerokość wszystkich kolumn. Wcześniejsze kolumny tekstu będą się kończyć ponad tytułem, a następne zaczynać poniżej niego. Zatem nie mamy tutaj do czynienia z sytuacją spotykaną czasem w gazetach, kiedy tekst w kolumnach czytamy z góry do dołu przeskakując przez tytuł lub zdjęcie umieszczone w środku.
W obecnej wersji specyfikacja CSS nie pozwala określać liczby łączonych kolumn.
Przykład {column-span}
column-span: all; To jest element rozciągający się ponad wszystkimi kolumnami tekstu.
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
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
column-span: wartość | 50 2016-04-13 | 71 2019-12-10 | 12 2015-07-29 | 37 2016-05-04 | 9 2015-09-30 |
column-span: all | 6 2010-09-02 | 71 2019-12-10 | 12 2015-07-29 | 15 2013-07-02 | 5.1 2011-07-20 |
column-span: none | 6 2010-09-02 | 71 2019-12-10 | 12 2015-07-29 | 15 2013-07-02 | 5.1 2011-07-20 |