Överflöd - Overflow

Vad är överflöd?

Överflöd avser hur webbläsaren hanterar innehåll som överskrider gränserna för sitt behållarobjekt.

Det finns fyra huvudtyper av överflöd:

Overflow: visible: Innehållet flödar utanför behållaren utan några visuella begränsningar.
Overflow: hidden: Innehållet som överskrider behållaren klipps av och är inte synligt.
Overflow: scroll: Ett rullningsfält läggs till behållaren, vilket gör det möjligt för användaren att bläddra bland innehållet.
Overflow: auto: Fungerar som "scroll", men rullningsfältet visas endast när innehållet överskrider behållarens gränser.

För att ställa in överflöd för ett element, använd följande CSS-egenskap:

overflow: [visible | hidden | scroll | auto]

Hantera innehåll som överskrider elementgränser

.behållare {
  bredd: 200px;
  höjd: 100px;
  overflow: auto;
}

I det här exemplet:

.behållare är ett element med en bredd på 200px och en höjd på 100px.
overflow: auto anger att ett rullningsfält ska läggas till när innehållet överskrider elementgränserna. Detta gör att användaren kan bläddra bland innehållet inom behållaren.

Använd overflow: hidden med försiktighet, eftersom det kan göra innehåll otillgängligt för hjälpmedel som skärmläsare.
Om overflow: scroll används, se till att rullningsfältet är enkelt att använda och synligt för användare.