Linia rozdzielająca kolumn {column-rule-color, column-rule-style, column-rule-width, column-rule}

W jaki sposób dodać pionową linię rozdzielającą kolumny tekstu?

CSS 3

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 {column-rule}

columns: 3; column-rule: 1px solid black;
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-rule-color: wartość`	50 2016-04-13	52 2017-03-07	12 2015-07-29	11.1 2011-04-12	9 2015-09-30
`column-rule-style: wartość`	50 2016-04-13	52 2017-03-07	12 2015-07-29	11.1 2011-04-12	9 2015-09-30
`column-rule-width: wartość`	50 2016-04-13	52 2017-03-07	12 2015-07-29	11.1 2011-04-12	9 2015-09-30
`column-rule: wartość`	50 2016-04-13	52 2017-03-07	12 2015-07-29	11.1 2011-04-12	9 2015-09-30

Komentarze

Zobacz więcej komentarzy