Szerokość kolumny {column-width}
Jak ustalić szerokość kolumny tekstu?
CSS 3
selektor { column-width: szerokość }Szerokość jest wyrażona w jednostkach długości i musi być większa od zera. Aby usunąć kolumny lub pozwolić przeglądarce wyznaczyć ich szerokość w inny sposób, należy podać wartość auto.
Ustalając szerokość kolumn pozwalamy przeglądarce automatycznie wyświetlić tyle kolumn, ile będzie konieczne, aby pomieścić całą zawartość elementu. Liczba kolumn nie będzie jednak większa niż zdoła się zmieścić w założonej szerokości elementu albo strony.
Należy pamiętać, że faktyczna wyświetlona szerokość kolumny może być większa niż podana, ponieważ przeglądarka stara się wypełnić treścią całą szerokość wielokolumnowego bloku. Na przykład podając "column-width: 45px; width: 100px", aby kolumny zajęły całą poziomą przestrzeń elementu, zostaną dopasowane do szerokości 50px. W szczególnym przypadku kolumna może być również węższa niż podano - jeżeli cały blok jest węższy, aby mógł pomieścić przynajmniej jedną kolumnę.
W obecnej wersji specyfikacja CSS nie pozwala ustalać różnej szerokości kolumn tego samego elementu.
Przykład {column-width}
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... 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-width: wartość | 50 2016-04-13 | 50 2016-11-15 | 12 2015-07-29 | 11.1 2011-04-12 | 9 2015-09-30 |
column-width: auto | 1 2008-12-11 | 1.5 2005-11-29 | 12 2015-07-29 | 15 2013-07-02 | 3 2007-10-26 |