Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Håndtering av Innholdsoverflyt i CSS | Mastering CSS-posisjonering
Avanserte CSS-teknikker

bookHåndtering av Innholdsoverflyt i CSS

La oss se på hvordan vi kan kontrollere overløp av innhold ved hjelp av én egenskap. Noen ganger har vi en fastsatt width og height på elementet. Likevel kan det hende at det indre innholdet er mye større enn tilgjengelig plass. Egenskapen overflow styrer hvordan innholdet i et element oppfører seg når det overskrider de eksplisitt angitte verdiene for height eller width.

overflow: visible | scroll | hidden | auto
  • visible – er standardverdien. Innholdet flyter utenfor elementets kanter og forblir synlig;
  • scroll – Innholdet flyter utenfor elementets kanter, og det vises en rullefelt som lar brukeren bla både vertikalt og horisontalt;
  • hidden – Innholdet som flyter utenfor elementets kanter blir klippet og ikke synlig;
  • auto – fungerer på samme måte som scroll. Men rullefelt vises kun når innholdet flyter utenfor elementets kanter.

Merk

Overflytende innhold påvirker ikke geometrien til andre elementer.

visible

Hvis overflow-egenskapen ikke er satt, er standardverdien visible. Det betyr at innholdet vil vises utenfor elementets kanter. I eksemplet er boksens kanter markert med darkblue, og boksen har faste egenskaper for width og height.

index.html

index.html

index.css

index.css

copy

scroll

Hele elementinnholdet kan vises ved hjelp av en rullefelt. Se eksempelet:

index.html

index.html

index.css

index.css

copy

hidden

Alt overflødig innhold vil bli skjult, og brukeren vil aldri se det. Dette er vanligvis nyttig kun når vi trenger å lage dekorative effekter.

index.html

index.html

index.css

index.css

copy
question mark

Hva gjør overflow-egenskapen?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 12

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.04

bookHåndtering av Innholdsoverflyt i CSS

Sveip for å vise menyen

La oss se på hvordan vi kan kontrollere overløp av innhold ved hjelp av én egenskap. Noen ganger har vi en fastsatt width og height på elementet. Likevel kan det hende at det indre innholdet er mye større enn tilgjengelig plass. Egenskapen overflow styrer hvordan innholdet i et element oppfører seg når det overskrider de eksplisitt angitte verdiene for height eller width.

overflow: visible | scroll | hidden | auto
  • visible – er standardverdien. Innholdet flyter utenfor elementets kanter og forblir synlig;
  • scroll – Innholdet flyter utenfor elementets kanter, og det vises en rullefelt som lar brukeren bla både vertikalt og horisontalt;
  • hidden – Innholdet som flyter utenfor elementets kanter blir klippet og ikke synlig;
  • auto – fungerer på samme måte som scroll. Men rullefelt vises kun når innholdet flyter utenfor elementets kanter.

Merk

Overflytende innhold påvirker ikke geometrien til andre elementer.

visible

Hvis overflow-egenskapen ikke er satt, er standardverdien visible. Det betyr at innholdet vil vises utenfor elementets kanter. I eksemplet er boksens kanter markert med darkblue, og boksen har faste egenskaper for width og height.

index.html

index.html

index.css

index.css

copy

scroll

Hele elementinnholdet kan vises ved hjelp av en rullefelt. Se eksempelet:

index.html

index.html

index.css

index.css

copy

hidden

Alt overflødig innhold vil bli skjult, og brukeren vil aldri se det. Dette er vanligvis nyttig kun når vi trenger å lage dekorative effekter.

index.html

index.html

index.css

index.css

copy
question mark

Hva gjør overflow-egenskapen?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 12
some-alt