overflow: Behandlung von übergroßem Inhalt

0 | 4637 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "overflow: Behandlung von übergroßem Inhalt" mit Ihrem Wissen!

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:

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
overflow

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

overflow  
HTML
 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


Wikiseite bearbeiten

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.

Mitarbeiter