Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Własność overflow

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.

Artykuł: Olimpiada Zdrowia PCK

Olimpiada Zdrowia PCK

Artykuł: Zostań dawcą szpiku!

Zostań dawcą szpiku!

Artykuł: Przeglądarka Vivaldi

Przeglądarka Vivaldi

Artykuł: Lenovo

Lenovo

Artykuł: Światowy Dzień Oszczędzania

Światowy Dzień Oszczędzania

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły