Podział tekstu na równej szerokości kolumny – Multiple Columns [CSS]

dynamiczny podział tekstu na równe kolumny

Kategoria wpisu Kursy, PHP, HTML, CSS, Tekst Tagi: , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (2 głosów, średnia: 5,00 z 5)
Loading...

Tym razem pokażę wam w jaki sposób dokonać podziału tekstu na kilka równej szerokości kolumn (bez użycia tradycyjnego grida) jak z dowolnej gazety. Właściwości CSS, które opisze poniżej powoduje w miarę równomierny podział długości tekstu dostosowany do aktualnej szerokości naszej strony. Oznacza to, że nie musimy tworzyć kilku elementów blokowych i martwić się później jak to będzie wyglądało na innym monitorze. „Odpada” nam więc tworzenie dodatkowej siatki dla tekstu. Podział tekstu będzie dokonywał się dynamicznie.

Jak już zdążyłam napisać uzyskane kolumny będą mniej więcej takiej samej długości. Metoda ta działa jednak tylko na sam tekst, jeżeli więc interesuje was jak ogólnie tworzyć kolumny na stronie zapraszam do przeczytania innego mojego wpisu.

Wartości stosowane przy Multiple Columns

Oczywiście do stworzenia tych kolumn będziemy potrzebowali więcej jak jednej właściwości CSS. Każda z nich będzie odpowiadać za inny element/ aspekt dotyczący ułożenia kolumn na stronie. Najprościej będzie to chyba porównać do tabeli. Gdzie musimy podjąć decyzję ile chcemy mieć kolumn, jakie przerwy mają być między nimi.

Na początek warto się zapozna z kilkoma właściwościami CSS3:

  • column-count – określa ilość kolumn na jakie podzielimy nasz tekst
  • column-gap – dodaje odstępy między kolumnami
  • column-rule-style – definiuje rodzaj stylu obramowania (czy będzie to np. zwykła linia, czy może kropkowana)
  • column-rule-width – szerokość obramowania
  • column-rule-color  – kolor obramowania
  • column-rule – połączenie innych właściwości
  • column-span – określa, ile kolumn ma obejmować element.
  • column-width – określa proponowaną, optymalną szerokość kolumn

Jak podzielić tekst na 3 rzędy

Na początek przygotowałam przykładowy tekst:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.

Kod CSS dla przykładu

A tak prezentuje się kod HTML – nie będziemy w nim praktycznie wprowadzać w nim zmian poza zmianą klasy


Teraz ten sam tekst dzielimy na części – jedynie z pomocą CSS. W tym celu dodam do elementu div klasę newspaper

See the Pen column-count css by Aura (@Julka85) on CodePen.0

Właściwości klasy newspaper

Kod HTML

Ilość uzyskanych rzędów określana jest za pomocą parametru column-count np. podział na 2:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat,

Metoda ta sprawdza się również na stronach RWD. Kolumny będą się dostosowywać do szerokości ekranu. W naszym przypadku szerokość minimalna to 200px. W przypadku gdy szerokość ekranu będzie mniejsza niż 200px z 2 kolumn zrobi się jedna.

Dodawanie widocznego podziału między kolumnami

W celu dodania linii rozdzielających kolumny wystarczy do kodu CSS dodać:

Oczywiście nie jesteśmy ograniczeni do kropkowanych linii podziału – praktycznie mamy takie same opcje jak przy innych obramowaniach.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.

Rozdzielanie kolumn – column-rule-color

Jak penie zauważyliście kolor rozdzielających kolumny linii jest czerwony. Efekt ten uzyskałam dodając właściwość:

Właściwość column-span

Przykładowe zastosowanie column-span

See the Pen columns CSS by Aura (@Julka85) on CodePen.0

Kod HTML przykładu

kod CSS

W powyższym przypadku dzięki właściwości column-span mamy wyraźnie określone granice – bez niej elementy zaczęły by się układać jeden pod drugim.

Działanie column-gap

Zadaniem column-gap jest określanie przerwy pomiędzy kolumnami.

Interpretacja przez przeglądarki
WłaściwośćChromeInternet Explorer / EdgeFirefoxSafariOpera
Wszystkie50.0
4.0 -webkit-
10.052.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1

Uwaga: column-span – nie jest obsługiwana przez Firefox

Źródło:
https://www.w3schools.com/css/css3_multiple_columns.asp

Dodatkowe tagi:
Układ wielokolumnowy z pomocą CSS column-count
Multiple Columns, płynne dzielenie tekstu na kilka kolumn z pomocą CSS
kolumny o określonej szerokości bez pomocy div
automatyczny, samodzielny podział na kolumny
bezpośredniej interwencji

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *