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: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
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.