CSS layout - overflod

CSS overflow-egenskaben kontrollerer, hvordan indhold, der er for stort til at passe i området, håndteres.

Denne tekst er meget lang, og dens container har kun en højde på 100 pixel. Derfor er der tilføjet en rullespalte for at hjælpe læseren med at rulle indholdet. Denne tekst er meget lang, og dens container har kun en højde på 100 pixel. Derfor er der tilføjet en rullespalte for at hjælpe læseren med at rulle indholdet. Denne tekst er meget lang, og dens container har kun en højde på 100 pixel. Derfor er der tilføjet en rullespalte for at hjælpe læseren med at rulle indholdet. Denne tekst er meget lang, og dens container har kun en højde på 100 pixel. Derfor er der tilføjet en rullespalte for at hjælpe læseren med at rulle indholdet. Denne tekst er meget lang, og dens container har kun en højde på 100 pixel. Derfor er der tilføjet en rullespalte for at hjælpe læseren med at rulle indholdet. Denne tekst er meget lang, og dens container har kun en højde på 100 pixel. Derfor er der tilføjet en rullespalte for at hjælpe læseren med at rulle indholdet. Denne tekst er meget lang, og dens container har kun en højde på 100 pixel. Derfor er der tilføjet en rullespalte for at hjælpe læseren med at rulle indholdet. Denne tekst er meget lang, og dens container har kun en højde på 100 pixel. Derfor er der tilføjet en rullespalte for at hjælpe læseren med at rulle indholdet. Denne tekst er meget lang, og dens container har kun en højde på 100 pixel. Derfor er der tilføjet en rullespalte for at hjælpe læseren med at rulle indholdet. Denne tekst er meget lang, og dens container har kun en højde på 100 pixel. Derfor er der tilføjet en rullespalte for at hjælpe læseren med at rulle indholdet. Denne tekst er meget lang, og dens container har kun en højde på 100 pixel. Derfor er der tilføjet en rullespalte for at hjælpe læseren med at rulle indholdet.

Prøv det selv

CSS Overflow

overflow Egenskaben bestemmer, om indholdet skal beskæres eller en rullespalte tilføjes, når indholdet er for stort til at passe i den angivne region.

overflow Egenskaben kan indstilles til følgende værdier:

  • visible - Standard. Overskydende del vil ikke blive beskåret. Indholdet render uden for elementets ramme
  • hidden - Overskydende del vil blive beskåret, og resten af indholdet vil være usynligt
  • scroll - Overskydende del vil blive beskåret, og en rullespalte tilføjes for at se resten af indholdet
  • auto - Med scroll Lignende, men kun tilføjer rullespalte ved behov

Kommentar:overflow Egenskaben gælder kun for blokelementer med en specificeret højde.

Kommentar:I OS X Lion (på Mac) er rullespalten standardmæssigt skjult og vises kun når den bruges (selvom "overflow:scroll" er sat).

overflow: visible

Standardmæssigt er overskydende del synlig (visible) betyder det, at det ikke vil blive beskåret, men render uden for elementets ramme:

Når du ønsker at have bedre kontrol over layout, kan du bruge overflow-egenskaben. overflow-egenskaben angiver, hvad der sker, hvis indholdet overskrider elementets ramme.

Eksempel

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

Prøv det selv

overflow: hidden

Hvis du bruger hidden værdi, vil overskydende del blive beskåret, og resten af indholdet vil blive skjult:

Når du ønsker at have bedre kontrol over layout, kan du bruge overflow-egenskaben. overflow-egenskaben angiver, hvad der sker, hvis indholdet overskrider elementets ramme.

Eksempel

div {
  overflow: hidden;
}

Prøv det selv

overflow: scroll

Hvis værdien sættes til scrollOverskydende del vil blive beskåret, og en rullespalte tilføjes for at rulle inde i rammen. Bemærk, at dette tilføjer en rullespalte i både horisontal og vertikal retning (selvom du ikke har brug for det):

Når du ønsker at have bedre kontrol over layout, kan du bruge overflow-egenskaben. overflow-egenskaben angiver, hvad der sker, hvis indholdet overskrider elementets ramme.

Eksempel

div {
  overflow: scroll;
}

Prøv det selv

overflow: auto

auto værdien ligner scrollmen det tilføjer kun en rullespalte, når det er nødvendigt:

Når du ønsker at have bedre kontrol over layout, kan du bruge overflow-egenskaben. overflow-egenskaben angiver, hvad der sker, hvis indholdet overskrider elementets ramme.

Eksempel

div {
  overflow: auto;
}

Prøv det selv

overflow-x og overflow-y

overflow-x og overflow-y Egenskaben bestemmer om indholdets overskydende del skal ændres horisontalt eller vertikalt (eller begge)

  • overflow-x Angiv hvordan indholdets venstre/højre kant skal håndteres.
  • overflow-y Angiv hvordan indholdets øvre/bundne kant skal håndteres.
Når du ønsker at have bedre kontrol over layout, kan du bruge overflow-egenskaben. overflow-egenskaben angiver, hvad der sker, hvis indholdet overskrider elementets ramme.

Eksempel

div {
  overflow-x: hidden; /* Skjul vandret rullemenu */
  overflow-y: scroll; /* Tilføj lodret rullemenu */
}

Prøv det selv

Alle CSS Overflow egenskaber

Egenskab Beskrivelse
overflow Definerer, hvad der sker, hvis indholdet fylder elementkassen.
overflow-x Definerer, hvordan indholdets venstre/højre kanter håndteres, når indholdet fylder elementets indholdsområde.
overflow-y Specificerer, hvordan indholdets øvre/lavere kanter håndteres, når indholdet fylder elementets indholdsområde.