Overflow CSS

overflow

Własność, która pozwala zapobiegać zjawisku wystawania zawartości poza element, to overflow (ang. nadmiar, przelewać się). W dokładnym tłumaczeniu dokładnie chodzi o to co zrobić, z zawartością elementu, jeśli wychodzi ona poza jego granice.

overflow: visible; (domyślna)
overflow: hidden;
overflow: scroll;
overflow: auto;

overflow:visible

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, quisquam sunt. Consectetur unde modi quos provident adipisicing elit ure saepe perspiciatis repellat.

overflow:hidden

overflow:hidden Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, quisquam sunt. Consectetur unde modi quos provident neque ullam iure saepe perspiciatis repellat.

overflow:scroll

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, quisquam sunt. Consectetur unde modi quos provident neque ullam iure saepe perspiciatis repellat.

overflow:auto

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, quisquam sunt. Consectetur unde modi quos provident neque ullam iure saepe perspiciatis repellat.

visible
Domyślna wartość to visible (ang. widoczny). Jeśli tekst wychodzi poza granicę elementu, to zostanie pokazany.

p {
  overflow: visible;
  width: 250px;
  height: 60px;
  border: 1px solid #BEBEBE;
}

overflow:visible

Tekst, który będzie wystawał poza element zostanie pokazany. Skorzystamy z wypełniacza tekstowego lorem ipsum.

hidden
Wartość hidden (ang. ukryty) ukrywa zawartość, która wychodzi poza granicę elementu.

p {
  overflow: hidden;
  width: 250px;
  height: 60px;
  border: 1px solid #BEBEBE;
}

overflow:hidden

Tekst, który będzie wystawał poza element zostanie ukryty. Skorzystamy z wypełniacza tekstowego lorem ipsum.

scroll
W przypadku wartości scroll (ang. przewiń) zawartość jest przycinana i można do niej dostać się za pomocą paska przewijania (ang. scrollbar).

p {
  overflow: scroll;
  width: 250px;
  height: 100px;
  border: 1px solid #BEBEBE;
}

overflow:scroll

Zawartość tego paragrafu zostanie ucięta, a następnie można będzie się do niej dostać poprzez przeglądarkowy pasek przewijania. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, quisquam sunt. Consectetur unde modi quos provident neque ullam iure saepe perspiciatis repellat.

auto
Wartość scroll wymaga za każdym razem dodania paska przewijania, nawet jak nie jest to konieczne, tzn. tekst bez problemu mieści się w oknie i nie musimy go przewijać. Możemy to rozwiązać za pomocą wartości auto (ang. automatycznie). Wartość ta sama dostosowuje kiedy scrollbar jest potrzebny. Kiedy jest zbędny to go nie pokazuje. W poniższym przykładzie nie zostanie dodany poziomy pasek przewijania.

p {
  overflow: auto;
  width: 250px;
  height: 100px;
  border: 1px solid #BEBEBE;
}

overflow:auto

Zawartość tego paragrafu zostanie ucięta, a następnie można będzie się do niej dostać poprzez przeglądarkowy pasek przewijania. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, quisquam sunt. Consectetur unde modi quos provident neque ullam iure saepe perspiciatis repellat.

Jeśli masz czas i ochotę sprawdź mój nowy projekt Zdalny Ninja. Jest to serwis poświęcony Pracy Zdalnej. Zachęcam Cię już teraz do wpisania się na listę osób, które jako pierwsze dowiedzą się, że projekt wystartował.