De overflowfastighets styr vad som händer med innehåll som raster utanför sina gränser: föreställa sig en divdär du explicit att vara 200px bred, men den innehåller en bild som är 300px bred. Den bilden sticker ut från div och är som visiblestandard. Medan du ställer in overflowvärdet på hiddenkommer bilden att klippas av vid 200 pixlar.
div ( overflow: visible | hidden | scroll | auto | inherit )Värden
visible: innehåll klipps inte när det fortsätter utanför sin låda. Detta är standardvärdet för egenskapenhidden: överflödigt innehåll kommer att döljas.scroll: liknar dolda förutom att användare kan bläddra igenom det dolda innehålletauto: om innehållet fortsätter utanför sin ruta döljs innehållet medan ett rullningsfält ska vara synligt för användare att läsa resten av innehållet.initial: använder standardvärdet som ärvisibleinherit: ställer överflödet till värdet på dess överordnade element.
Kom ihåg att texten naturligtvis kommer att slingras i slutet av ett element (såvida inte det tomma rummet ändras) så att texten sällan kommer att orsaka överflöd. Om inte en höjd är inställd, kommer texten också att skjuta ett element också högre. Överströmning spelas oftare in när explicita bredder och höjder är inställda och det skulle vara oönskat för något innehåll att spillas ut, eller när rullning uttryckligen undviks.
Synlig
Om du inte ställer in överflödesegenskapen alls är standard synlig. Så i allmänhet finns det ingen anledning att uttryckligen ställa in den här egenskapen till synlig om du inte åsidosätter den från att den ställs in någon annanstans.
Det viktiga att komma ihåg här är att även om innehållet är synligt utanför lådan påverkar inte innehållet flödet på sidan. Till exempel:
Generellt sett bör du inte ställa in statiska höjder på rutor med webbtext i alla fall, så det borde inte komma upp.
Dold
Motsatsen till standard synlig är dold . Detta döljer bokstavligen allt innehåll som sträcker sig utanför rutan.
Detta är särskilt användbart vid användning med dynamiskt innehåll och möjligheten att ett överflöde orsakar allvarliga layoutproblem. Men kom ihåg att innehåll som är dolt på detta sätt är helt oåtkomligt (med kort titt på källan). Så till exempel har en användare sin typsnittstorlek större än du förväntar dig, du kanske trycker text utanför en ruta och gömmer den helt från deras syn.
Skrolla
Om du ställer in överflödesvärdet för en ruta för att bläddra döljs innehållet från att återges utanför rutan, men kommer att erbjuda rullningsfält för att bläddra inuti rutan för att visa innehållet.
Observera med detta värde är att du får BÅDA horisontella och vertikala rullningslister oavsett vad, även om innehållet bara kräver det ena eller det andra.
iOS: s momentumrullning kan aktiveras för detta värde med -webkit-overflow-scrolling.
Obs! I OS X Lion, när rullningslister är inställda på att endast visas när de används, scrollbeter sig mer som genom autoatt bara nödvändiga rullningslister visas.
Bil
Autoöverflöde liknar mycket rullningsvärdet, bara det löser problemet med att få rullningslister när du inte behöver dem. Rullstaplarna visas bara om det finns innehåll som faktiskt bryter ut ur elementet.
overflow-x och overflow-y
Det är också möjligt att manipulera överflöd av innehåll horisontellt eller vertikalt med overflow-xoch overflow-yegenskaper. Till exempel i demonstrationen nedan kan det horisontella överflödet rullas igenom medan texten som sträcker sig utanför rutans höjd är dold:
.box ( overflow-y: hidden; overflow-x: scroll; )Float Clearing
En av de mer populära användningsområdena för inställning av överflöde, konstigt nog, är flottörröjning. Att ställa in överflöd rensar inte flottören vid elementet, det rensar sig själv. Det betyder att elementet med överflöd (vilket värde som helst utom visible) kommer att sträcka sig så stort som det behöver omfatta underordnade element inuti som är flytande (istället för att kollapsa), förutsatt att höjden inte deklareras. Så här:
En bättre float clearing-teknik är clearfix, eftersom det inte kräver att du ändrar överflödsegenskapen på ett sätt du inte behöver.
Skapar blockformateringskontext
Det är intressant att notera att det overflowockså skapar ett nytt blockformateringskontext som är användbart om vi vill rikta in ett blockelement bredvid en flytande. I exemplet nedan visar vi hur ett antal stycken kommer att interagera med en flytande bild som standard och sedan använder vi för overflow: hiddenatt justera texten i sin egen ruta:
Detta kommer från ett bra inlägg av Nicole Sullivan som fortsatte att inspirera medieobjektet.
Kan rullstaplar utformas med CSS?
Du brukade kunna utforma rullningslister i IE (v5.5?) Men inte mer. Du kan utforma dem nu igen i WebKit-webbläsare. Om du behöver anpassade rullningslister över webbläsare, se till JavaScript.
Om ett element måste ha rullningslister bifogade för att respektera överskridningsvärdet, placerar Firefox dem utanför elementet och håller den synliga bredden / höjden som deklarerad. IE placerar rullningslisterna inuti och håller den totala bredden / höjden som deklarerad.
Demo
Demos för den här artikeln hämtad från denna exempelsida.
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Relaterad
- Flytfastigheten
Mer information
- Förstå Humble Clearfix
- Överflöd: en hemlig fördel
- Överflöde på MDN
- Överflöde på W3C
- Hitta / fixa oavsiktligt kroppsflöde