CSS / Układ wielokolumnowy
Linia rozdzielająca {COLUMN-RULE}
W jaki sposób dodać pionową linię rozdzielającą kolumny tekstu?
(CSS 3 - interpretuje Internet Explorer 10, Firefox 52, Opera 11-12 i 37, Chrome 50)
- Kolor:
selektor { column-rule-color: kolor }gdzie "kolor" jest definicją koloru - Styl:
selektor { column-rule-style: styl }gdzie "styl" określa się identycznie jak w przypadku obramowania - Szerokość:
selektor { column-rule-width: szerokość }gdzie "szerkość" określa się identycznie jak w przypadku obramowania - Atrybuty mieszane:
selektor { column-rule: wartości atrybutów }Jako "wartości atrybutów" podaje się rozdzielone spacjami wartości szerokości, stylu i koloru linii rozdzielającej.
Czasami samo oddzielenie kolumn odstępem nie jest wystarczające, aby czytelnik mógł wygodnie przeczytać cały tekst oraz już na pierwszy rzut oka widział, że treść w ogóle jest podzielona na kolumny. Wtedy możemy pomiędzy sąsiednimi kolumnami wstawić dodatkowo pionową linię rozdzielającą. Jest ona wyświetlana zawsze na środku przestrzeni między kolumnami. Sama linia rozdzielająca nie zabiera miejsca z szerokość elementu wielokolumnowego. Jeśli jej grubość będzie większa niż szerokość odstępu kolumn, wyświetli się pod tekstem znajdującym się w kolumnach.
W obecnej wersji specyfikacja CSS nie pozwala ustalać różnej linii rozdzielającej kolumny tego samego elementu.
Przykład:
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...