CSS layout - överskridning

CSS overflow-attributet kontrollerar hur innehåll som är för stort för att få plats i området hanteras.

Texten är mycket lång och dess container har en höjd på endast 100 pixlar.Därför har en rullningslist lagts till för att hjälpa läsaren att rulla innehållet. Texten är mycket lång och dess container har en höjd på endast 100 pixlar.Därför har en rullningslist lagts till för att hjälpa läsaren att rulla innehållet. Texten är mycket lång och dess container har en höjd på endast 100 pixlar.Därför har en rullningslist lagts till för att hjälpa läsaren att rulla innehållet. Texten är mycket lång och dess container har en höjd på endast 100 pixlar.Därför har en rullningslist lagts till för att hjälpa läsaren att rulla innehållet. Texten är mycket lång och dess container har en höjd på endast 100 pixlar.Därför har en rullningslist lagts till för att hjälpa läsaren att rulla innehållet. Texten är mycket lång och dess container har en höjd på endast 100 pixlar.Därför har en rullningslist lagts till för att hjälpa läsaren att rulla innehållet. Texten är mycket lång och dess container har en höjd på endast 100 pixlar.Därför har en rullningslist lagts till för att hjälpa läsaren att rulla innehållet. Texten är mycket lång och dess container har en höjd på endast 100 pixlar.Därför har en rullningslist lagts till för att hjälpa läsaren att rulla innehållet. Texten är mycket lång och dess container har en höjd på endast 100 pixlar.Därför har en rullningslist lagts till för att hjälpa läsaren att rulla innehållet. Texten är mycket lång och dess container har en höjd på endast 100 pixlar.Därför har en rullningslist lagts till för att hjälpa läsaren att rulla innehållet. Texten är mycket lång och dess container har en höjd på endast 100 pixlar.Därför har en rullningslist lagts till för att hjälpa läsaren att rulla innehållet.

Prova själv

CSS Overflow

overflow Attributet specificerar om innehållet klipps av eller en rullningslist läggs till när innehållet är för stort för att få plats i den specificerade regionen.

overflow Attributet kan sättas till följande värden:

  • visible - Standard. Överskridandet klipps inte av. Innehållet renderas utanför elementets ram
  • hidden - Överskridandet klipps av och det övriga innehållet är osynligt
  • scroll - Överskridandet klipps av och en rullningslist läggs till för att visa det övriga innehållet
  • auto - med scroll Liknande, men lägger till en rullningslist endast vid behov

Kommentar:overflow Attributet gäller endast för blockelement med specificerad höjd.

Kommentar:I OS X Lion (på Mac) är rullningslistan som standard dold och visas endast när den används (även om "overflow:scroll" är satt).

overflow: visible

Som standard är överskridandet synligt (visible) vilket innebär att det inte klipps av utan renderas utanför elementets ram:

När du vill ha bättre kontroll över layouten kan du använda overflow-attributet. overflow-attributet specificerar vad som händer om innehållet överskrider elementets ram.

Exempel

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

Prova själv

overflow: hidden

Om du använder hidden värdet klipps av överskridandet och det övriga innehållet göms:

När du vill ha bättre kontroll över layouten kan du använda overflow-attributet. overflow-attributet specificerar vad som händer om innehållet överskrider elementets ram.

Exempel

div {
  overflow: hidden;
}

Prova själv

overflow: scroll

Om värdet sätts till scrollöverskridandet klipps av och en rullningslist läggs till för att rulla inom ramen.Observera att detta lägger till en rullningslist i både horisontell och vertikal riktning (även om du inte behöver det):

När du vill ha bättre kontroll över layouten kan du använda overflow-attributet. overflow-attributet specificerar vad som händer om innehållet överskrider elementets ram.

Exempel

div {
  overflow: scroll;
}

Prova själv

overflow: auto

auto värdet liknar scrollmen det lägger till en rullningslist endast vid behov:

När du vill ha bättre kontroll över layouten kan du använda overflow-attributet. overflow-attributet specificerar vad som händer om innehållet överskrider elementets ram.

Exempel

div {
  overflow: auto;
}

Prova själv

overflow-x och overflow-y

overflow-x och overflow-y Attributet definierar om innehållet endast ska ändras horisontellt eller vertikalt (eller både)

  • overflow-x Specificera hur innehållet ska hanteras på vänster/höger kant.
  • overflow-y Specificera hur innehållet ska hanteras på övre/nedre kant.
När du vill ha bättre kontroll över layouten kan du använda overflow-attributet. overflow-attributet specificerar vad som händer om innehållet överskrider elementets ram.

Exempel

div {
  overflow-x: hidden; /* Dölj horisontell rullningslist */
  overflow-y: scroll; /* Lägg till vertikal rullningslist */
}

Prova själv

Alla CSS Overflow egenskaper

Egenskap Beskrivning
overflow Specificera vad som händer om innehållet överskrider elementets ram.
overflow-x Specificera hur innehållet hanteras när innehållet i elementets inre område överskrider vänster/höger kanterna.
overflow-y Specificera hur innehållet hanteras när innehållet i elementets inre område överskrider.