wtorek,
CSS: Własność overflow
Własność overflow w CSS określa, co dzieje się z treścią elementu, gdy jest zbyt duża, aby zmieścić się w dostępnym obszarze.
Możliwe wartości własności overflow
visible
- Jest to wartość domyślna. Treść, która przekracza obszar elementu, jest wyświetlana poza jego granicami.
- Przykład:
overflow: visible;
hidden
- Wszelka treść, która wykracza poza granice elementu, jest ukryta.
- Przykład:
overflow: hidden;
scroll
- Niezależnie od tego, czy treść przekracza obszar elementu, paski przewijania są zawsze wyświetlane.
- Przykład:
overflow: scroll;
auto
- Przeglądarka decyduje, czy wyświetlić paski przewijania, gdy treść przekracza obszar elementu.
- Przykład:
overflow: auto;
overflow-x / overflow-y
- Pozwalają kontrolować zachowanie przewijania oddzielnie dla osi X (poziomej) i Y (pionowej).
- Przykłady:
overflow-x: scroll; overflow-y: hidden;
Przykłady użycia overflow
Ukrywanie nadmiarowej treści
.box {
width: 200px;
height: 100px;
overflow: hidden;
}
W tym przypadku, jeśli zawartość .box przekracza 200px szerokości lub 100px wysokości, nadmiarowa treść zostanie ukryta.
Zawsze pokazuj paski przewijania
.box {
width: 200px;
height: 100px;
overflow: scroll;
}
Tutaj, niezależnie od tego, czy zawartość przekracza wymiary .box, czy nie, paski przewijania będą widoczne.
Automatyczne paski przewijania
.box {
width: 200px;
height: 100px;
overflow: auto;
}
W tym przykładzie, paski przewijania pojawią się tylko wtedy, gdy treść wykracza poza wymiary .box.
Osobna kontrola nad osią poziomą i pionową
.box {
width: 200px;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
}
W tym przypadku, dla .box zawsze będzie wyświetlany poziomy pasek przewijania, ale pionowy pasek przewijania będzie ukryty, nawet jeśli treść przekracza wysokość elementu.
