Hå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 somscroll
. 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.css
scroll
Hele elementinnholdet kan vises ved hjelp av en rullefelt. Se eksempelet:
index.html
index.css
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.css
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
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
Hå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 somscroll
. 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.css
scroll
Hele elementinnholdet kan vises ved hjelp av en rullefelt. Se eksempelet:
index.html
index.css
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.css
Takk for tilbakemeldingene dine!