CSS
Svämma över
Sök…
Syntax
- översvämning: synlig | dold | bläddra | auto | initial | ärva;
parametrar
Overflow | detaljer |
|---|---|
visible | Visar allt överflödigt innehåll utanför elementet |
scroll | Gömmer det överfyllda innehållet och lägger till en bläddringsfält |
hidden | Gömmer det överfyllda innehållet, båda rullfältet försvinner och sidan fixas |
auto | Samma som scroll om innehållet flyter över, men lägger inte till rullningsfältet om innehållet passar |
inherit | Arv är moderelementets värde för den här egenskapen |
Anmärkningar
Vad händer när ett element är för litet för att visa innehållet? Som standard kommer innehållet bara att flyta över och visas utanför elementet. Det gör att ditt arbete ser dåligt ut. Du vill att ditt arbete ska se bra ut så att du ställer in översvämningsegenskapen för att hantera det överfyllda innehållet på ett önskvärt sätt.
Värdena för overflow är identiska med värdena för overflow-x och overflow-y , med undantag av att de gäller längs varje axel
Egenskaperna med overflow-wrap har också varit känd som egenskapen word-wrap .
Viktig anmärkning: Om du använder överflödesegenskapen med ett annat värde än synligt skapas en ny blockformateringskontext.
överflöd: bläddra
html
<div>
This div is too small to display its contents to display the effects of the overflow property.
</div>
CSS
div {
width:100px;
height:100px;
overflow:scroll;
}
Resultat
Innehållet ovan klipps i en ruta 100 till 100 px, med rullning tillgänglig för att se överfyllda innehåll.
De flesta webbläsare i skrivbordet visar både horisontella och vertikala rullningslister, oavsett om något innehåll klipps eller inte. Detta kan undvika problem med att rullningslister visas och försvinner i en dynamisk miljö. Skrivare kan skriva ut överfyllda innehåll.
överströmnings-wrap
overflow-wrap berättar för en webbläsare att den kan bryta en textrad i ett riktat element på flera rader på en annars okrossbar plats. Hjälpsam när det gäller att förhindra en lång textsträng som orsakar layoutproblem på grund av att dess behållare flyter över.
CSS
div {
width:100px;
outline: 1px dashed #bbb;
}
#div1 {
overflow-wrap:normal;
}
#div2 {
overflow-wrap:break-word;
}
html
<div id="div1">
<strong>#div1</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> is too long so it will overflow past the edge of the line-break
</div>
<div id="div2">
<strong>#div2</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> will be split at the line break and continue on the next line.
</div>
overflow-wrap - värde | detaljer |
|---|---|
normal | Låter ett ord flyta om det är längre än raden |
break-word | Delar ett ord i flera rader om det behövs |
inherit | Ärver moderelementets värde för den här egenskapen |
översvämning: synlig
html
<div>
Even if this div is too small to display its contents, the content is not clipped.
</div>
CSS
div {
width:50px;
height:50px;
overflow:visible;
}
Resultat
Innehållet klipps inte och kommer att återges utanför innehållsrutan om det överskrider behållarstorleken.
Blockera formateringskontekst skapat med överflöde
Om du använder overflow med ett annat värde än visible skapas ett nytt blockformateringskontext . Detta är användbart för att anpassa ett blockelement bredvid ett flytande element.
CSS
img {
float:left;
margin-right: 10px;
}
div {
overflow:hidden; /* creates block formatting context */
}
html
<img src="http://placehold.it/100x100">
<div>
<p>Lorem ipsum dolor sit amet, cum no paulo mollis pertinacia.</p>
<p>Ad case omnis nam, mutat deseruisse persequeris eos ad, in tollit debitis sea.</p>
</div>
Resultat
Detta exempel visar hur stycken i en div med overflow kommer att interagera med en flytande bild.
overflow-x och overflow-y
Dessa två egenskaper fungerar på liknande sätt som overflow och accepterar samma värden. overflow-x parametern fungerar endast på x- eller vänster-till-högeraxeln. overflow-y fungerar på y- eller topp-till-bottenaxeln.
html
<div id="div-x">
If this div is too small to display its contents,
the content to the left and right will be clipped.
</div>
<div id="div-y">
If this div is too small to display its contents,
the content to the top and bottom will be clipped.
</div>
CSS
div {
width: 200px;
height: 200px;
}
#div-x {
overflow-x: hidden;
}
#div-y {
overflow-y: hidden;
}