#26. Właściwość overflow

Overflow – właściwość porządkująca

Podczas tworzenia strony, zawierającą sporą ilość treści lub elementów, możemy trafić na wystającą zawartość przeznaczoną dla nich przestrzeń. 
Zazwyczaj tak się dzieję gdy mamy ustawiony kontener o określonych wymiarach i umieścimy w niego więcej tekstu niż jest w stanie pomieścić.
Właściwość overflow decyduję o tym, co ma zrobić z tym nadmiarem zawartości.
Poniżej po krótce objaśniam wartości która może przyjąć:
  • visible – wartość domyślna, to co wystaję po za element jest widoczne,
  • hidden – wystająca zawartość będzie niewidoczna i nie będzie miało wpływu na pozostałe elementy,
  • scroll – wystająca zawartość jest widoczna i dodaję się pasek przewijania do każdej osi, nawet gdy nie jest potrzebny,
  • auto – dodaję pasek przewijania dla wystającej treści, ale tylko wtedy gdy on jest potrzebny

W poniższym przykładzie zobaczysz przykłady poszczególnych wartości:

 

divine-morning-n4g7d

divine-morning-n4g7d by danielminschinski

Overflow-y

Mamy możliwość decydowania o tym, które przewijanie (scroll) w danym kontenerze ma się pojawiać. Overflow-x przyjmuję takie same wartości jak overflow i odpowiada za poziome przewijanie. Overflow-y tak samo jak wyżej, tylko że odpowiada za oś pionową.

Spójrz na przykład. Zastosowałem w nim przewijanie pionowe z wartością auto.

elastic-dubinsky-qrvnr

elastic-dubinsky-qrvnr by danielminschinski

Overflow-x

Właściwość overflow-x przydaję się, gdy treść danego kontenera HTML jest szersza niż jego rozmiary, a edycja zawartości jest niemożliwa. Przykładowo, załóż że tworzysz tabele która ma piętnaście kolumn a mieści się tylko dziesięć. Co w takim przypadku zrobić Właściwość overflow-x przychodzi z pomocą. Dzięki niej możesz poprzecznie przewijać zawartość kontenera i nie ma to wpływu na pozostałe elementy strony.

Tak jak wyżej, przykład zobrazuję Ci różnicę między właściwościami.

billowing-flower-gu6hm

billowing-flower-gu6hm by danielminschinski

To by było na tyle na temat overflow. Mam nadzieję że przedstawiłem dość czytelnie różnice między właściwościami i wartościami😉 

W kolejnym poście opiszę najważniejsze jednostki miar w CSS. 

Polecam zapisać się do newslettera. Dzisiaj dodałem dla Was powiadomienia Web Push. Możecie zaakceptować powiadomienia w okienku które Wam wyskoczy przy wejściu na bloga, bądź akceptacja dzwoneczkiem w prawym dolnym rogu. Polecam👍

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!