CSS Layout - Overloop

CSS overflow-eigenschap beheert de manier waarop inhoud wordt afgehandeld die te groot is om in de ruimte te passen.

Deze tekst is zeer lang en de hoogte van de container is slechts 100 pixels. Daarom is een scrollbar toegevoegd om de lezer te helpen bij het scrollen van de inhoud. Deze tekst is zeer lang en de hoogte van de container is slechts 100 pixels. Daarom is een scrollbar toegevoegd om de lezer te helpen bij het scrollen van de inhoud. Deze tekst is zeer lang en de hoogte van de container is slechts 100 pixels. Daarom is een scrollbar toegevoegd om de lezer te helpen bij het scrollen van de inhoud. Deze tekst is zeer lang en de hoogte van de container is slechts 100 pixels. Daarom is een scrollbar toegevoegd om de lezer te helpen bij het scrollen van de inhoud. Deze tekst is zeer lang en de hoogte van de container is slechts 100 pixels. Daarom is een scrollbar toegevoegd om de lezer te helpen bij het scrollen van de inhoud. Deze tekst is zeer lang en de hoogte van de container is slechts 100 pixels. Daarom is een scrollbar toegevoegd om de lezer te helpen bij het scrollen van de inhoud. Deze tekst is zeer lang en de hoogte van de container is slechts 100 pixels. Daarom is een scrollbar toegevoegd om de lezer te helpen bij het scrollen van de inhoud. Deze tekst is zeer lang en de hoogte van de container is slechts 100 pixels. Daarom is een scrollbar toegevoegd om de lezer te helpen bij het scrollen van de inhoud. Deze tekst is zeer lang en de hoogte van de container is slechts 100 pixels. Daarom is een scrollbar toegevoegd om de lezer te helpen bij het scrollen van de inhoud. Deze tekst is zeer lang en de hoogte van de container is slechts 100 pixels. Daarom is een scrollbar toegevoegd om de lezer te helpen bij het scrollen van de inhoud. Deze tekst is zeer lang en de hoogte van de container is slechts 100 pixels. Daarom is een scrollbar toegevoegd om de lezer te helpen bij het scrollen van de inhoud.

Probeer het zelf

CSS Overflow

overflow De eigenschap specificeert of de inhoud wordt afgesneden of een scrollbar wordt toegevoegd wanneer de inhoud te groot is om in de gespecificeerde ruimte te passen.

overflow De eigenschap kan de volgende waarden instellen:

  • visible - Standaard. De overflow wordt niet afgesneden. De inhoud wordt buiten de elementenbalk gerenderd
  • hidden - De overflow wordt afgesneden en de overige inhoud is niet zichtbaar
  • scroll - De overflow wordt afgesneden en een scrollbar wordt toegevoegd om de overige inhoud te bekijken
  • auto - Met scroll Soortgelijk, maar alleen wanneer nodig een scrollbar toevoegen

Opmerking:overflow De eigenschap is alleen van toepassing op blokelementen met een gespecificeerde hoogte.

Opmerking:In OS X Lion (op de Mac) is de scrollbar standaard verborgen en wordt alleen weergegeven wanneer deze wordt gebruikt (zelfs als "overflow:scroll" is ingesteld).

overflow: visible

Standaard is overflow zichtbaar (visible) wat betekent dat het niet wordt afgesneden, maar buiten de elementenbalk wordt gerenderd:

Als u de lay-out beter wilt controleren, kunt u de overflow-eigenschap gebruiken. De overflow-eigenschap specificeert wat er gebeurt als de inhoud de elementenbalk overschrijdt.

Voorbeeld

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

Probeer het zelf

overflow: hidden

als u hidden waarden, zal de overflow worden afgesneden en de overige inhoud worden verborgen:

Als u de lay-out beter wilt controleren, kunt u de overflow-eigenschap gebruiken. De overflow-eigenschap specificeert wat er gebeurt als de inhoud de elementenbalk overschrijdt.

Voorbeeld

div {
  overflow: hidden;
}

Probeer het zelf

overflow: scroll

als de waarde wordt ingesteld op scrollzal de overflow worden afgesneden en een scrollbar worden toegevoegd om binnen de doos te scrollen. Let op, dit voegt een scrollbar toe in zowel horizontale als verticale richting (zelfs als u dat niet nodig heeft):

Als u de lay-out beter wilt controleren, kunt u de overflow-eigenschap gebruiken. De overflow-eigenschap specificeert wat er gebeurt als de inhoud de elementenbalk overschrijdt.

Voorbeeld

div {
  overflow: scroll;
}

Probeer het zelf

overflow: auto

auto waarden soortgelijk aan scrollmaar het voegt alleen een scrollbar toe wanneer nodig:

Als u de lay-out beter wilt controleren, kunt u de overflow-eigenschap gebruiken. De overflow-eigenschap specificeert wat er gebeurt als de inhoud de elementenbalk overschrijdt.

Voorbeeld

div {
  overflow: auto;
}

Probeer het zelf

overflow-x en overflow-y

overflow-x en overflow-y De eigenschap bepaalt of de inhouds-overflow alleen horizontaal of verticaal (of beide) wordt gewijzigd:

  • overflow-x Specificeer hoe de links- en rechterrand van de inhoud worden afgehandeld.
  • overflow-y Specificeer hoe de boven- en onderrand van de inhoud worden afgehandeld.
Als u de lay-out beter wilt controleren, kunt u de overflow-eigenschap gebruiken. De overflow-eigenschap specificeert wat er gebeurt als de inhoud de elementenbalk overschrijdt.

Voorbeeld

div {
  overflow-x: hidden; /* Verberg de horizontale scrollbalk */
  overflow-y: scroll; /* Voeg een verticale scrollbalk toe */
}

Probeer het zelf

Alle CSS Overflow Eigenschappen

Eigenschap Beschrijving
overflow Bepaal wat er gebeurt als de inhoud van het element de grenzen van het element overschrijdt.
overflow-x Bepaal hoe de linkseer- of rechterrand van de inhoud van het element wordt afgehandeld wanneer de inhoud van het element overloopt.
overflow-y Specificeer hoe de bovendeel- of onderdeelrand van de inhoud van het element wordt afgehandeld wanneer de inhoud van het element overloopt.