overflow: Behandlung von übergroßem Inhalt
Anzeige Hier werben
overflow
Werte: visible, hidden, scroll, auto
Standardwert: visible
Vererbung: nein
Kurzschreibweise: keine
Anwendbar auf: Blockelemente, Tabellenzellen und Inline-Block-Elemente
CSS-Level: CSS2.1, CSS3
Bei Boxen und Tabellenzellen mit einer festgelegten Größe (height / width) kann es vorkommen, dass ein Text oder ein anderes Blockelement in diesem Element mehr Raum einnimmt, als das Element bieten kann. Durch die Eigenschaft overflow besteht die Möglichkeit in CSS zu definieren, wie dieser übergroße Inhalt behandelt werden soll.
Dazu stehen vier Werte zur Verfügung, die in der folgenden Tabelle erläutert werden:
Werte
| Wert |
Auswirkung |
visible (Standard) |
Der übergroße Inhalt wird außerhalb des Elements fortgesetzt und sprengt dessen Maße |
hidden |
Der übergroße Inhalt wird nicht dargestellt, das Element behält seine Proportionen |
scroll |
Das Element erhält eine Bildlaufleiste, so dass der komplette Inhalt dargestellt und die Proportionen erhalten werden |
auto |
Der Browser entscheidet, was passieren soll. In der Regel werden Bildlaufleisten angezeigt, wenn der Inhalt über das Element hinaus geht (wie bei scroll). |
Beispiel
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <style type="text/css">
div {
height:50px;
width:50px;
border:1px #000 solid;
padding:5px;
}
p {
border:1px #090 solid;
height:70px;
width:70px;
}
</style>
<h1>
overflow: visible
</h1>
<div style="overflow:visible;">
<p>
visible
</p>
</div>
<h1>
overflow: hidden
</h1>
<div style="overflow:hidden;">
<p>
hidden
</p>
</div>
<h1>
overflow: scroll (entspricht hier auch auto)
</h1>
<div style="overflow:scroll;">
<p>
scroll
</p>
</div>
|
weiterführende Artikel
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "overflow: Behandlung von übergroßem Inhalt" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "overflow: Behandlung von übergroßem Inhalt" hier bearbeiten.
-
Student der Biochemie und seit einigen Jahren im Hobby-Entwicklerbereich tätig. Stärken in XHTML/CSS und PHP, alles was mit Grafik zu tun hat, gehört nicht dazu.
-
David Danier arbeitet seit mehr als neun Jahren im Bereich Web Programmierung und ist unter anderem Geschäftsführer der Webagentur Team23 sowie Webmasterpro.de.
-
graphic, motion & web design - kernreaktor - mutter kind turnen
Hallo, ich fand das Beispiel sehr hilfreich. Teste auch auf Opera, dann sieht es wieder anders aus.
Weil ich so gerne auf der Leitung stehe, habe ich den Style etwas mit Farbe ergaenzt. Das koennte auch ablenken, aber mir hat das geholfen.
Hier der die Aenderung:
<style type="text/css">
div {
height:50px;
width:50px;
border:3px #000 solid;
padding:5px;
}
p {
border:1px #090 solid;
background-color:#ccffbb;
height:70px;
width:70px;
}
</style>
<div>test div</div>
<p>test p</p>