CSS
Overloop
Zoeken…
Syntaxis
- overloop: zichtbaar | verborgen | blader | auto | voorletter | erven;
parameters
Overflow | Details |
|---|---|
visible | Toont alle overvolle inhoud buiten het element |
scroll | Verbergt de overvolle inhoud en voegt een schuifbalk toe |
hidden | Verbergt de overvolle inhoud, beide schuifbalken verdwijnen en de pagina wordt gefixeerd |
auto | Hetzelfde als scroll als inhoud overloopt, maar voegt geen schuifbalk toe als inhoud past |
inherit | Neem de waarde van het bovenliggende element over voor deze eigenschap |
Opmerkingen
Wat gebeurt er als een element te klein is om de inhoud weer te geven? Standaard loopt de inhoud gewoon over en wordt deze buiten het element weergegeven. Dat maakt je werk er slecht uit. U wilt dat uw werk er goed uitziet, dus u stelt de eigenschap overloop in om de overlopende inhoud op een gewenste manier af te handelen.
Waarden voor de eigenschap overflow zijn identiek aan die voor de eigenschappen overflow-x en overflow-y , behalve dat ze van toepassing zijn langs elke as
De overflow-wrap is ook bekend als de word-wrap .
Belangrijke opmerking: als u de eigenschap overloop gebruikt met een andere waarde dan zichtbaar, wordt een nieuwe context voor blokopmaak gecreëerd.
overloop: bladeren
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;
}
Resultaat
Bovenstaande inhoud is geknipt in een doos van 100 bij 100 px, met scrollen beschikbaar om overlopende inhoud te bekijken.
De meeste desktopbrowsers geven zowel horizontale als verticale schuifbalken weer, ongeacht of er inhoud is afgeknipt. Dit kan problemen voorkomen met schuifbalken die verschijnen en verdwijnen in een dynamische omgeving. Printers kunnen overvolle inhoud afdrukken.
overflow-wrap
overflow-wrap vertelt een browser dat het een regel tekst binnen een doelelement op meerdere regels op een verder onbreekbare plaats kan breken. Nuttig bij het voorkomen van een lange reeks tekst die lay-outproblemen veroorzaakt door het overlopen van de container.
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 - Waarde | Details |
|---|---|
normal | Laat een woord overlopen als het langer is dan de regel |
break-word | Zal een woord in meerdere regels splitsen, indien nodig |
inherit | Hiermee wordt de waarde van het bovenliggende element voor deze eigenschap overgenomen |
overloop: zichtbaar
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;
}
Resultaat
Inhoud wordt niet uitgeknipt en wordt buiten het inhoudvak weergegeven als het de containergrootte overschrijdt.
Blokopmaak Context gemaakt met overloop
Als u de eigenschap overflow met een andere waarde dan visible wordt een nieuwe context voor visible gecreëerd. Dit is handig voor het uitlijnen van een blokelement naast een zwevend 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>
Resultaat
Dit voorbeeld laat zien hoe alinea's binnen een div met de ingestelde overflow zullen samenwerken met een zwevende afbeelding.
overflow-x en overflow-y
Deze twee eigenschappen werken op dezelfde manier als de overflow en accepteren dezelfde waarden. De parameter overflow-x werkt alleen op de x-as of van links naar rechts. De overflow-y werkt op de y-as of de as van boven naar beneden.
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;
}