SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
CSS/Eigenschaften/overflow
Die Eigenschaft overflow ist die Zusammenfassung der Eigenschaften overflow-x und overflow-y. Sie ermöglicht es, Inhalte größer als das Element zu machen oder den Platz für den Inhalt eines Elements zu beschränken. Wird overflow auf etwas anderes als visible
oder clip
eingestellt, wird für das Element ein neuer Blockformatierungskontext gebildet
- Erlaubte Werte
-
visible
= Element wird so weit ausgedehnt, dass sein Inhalt auf jeden Fall komplett sichtbar ist -
hidden
= Element wird abgeschnitten, wenn es die Grenzen überschreitet. Der Inhalt des Elements kann aber noch durch JavaScript gescrollt werden. -
clip
= Ähnlich wiehidden
, aber auch mit JavaScript ist kein Scrolling mehr möglich. -
scroll
= Element wird abgeschnitten, wenn es die Grenzen überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie in einem eingebetteten Frame-Fenster. Diese Scroll-Leisten sind immer sichtbar. -
auto
= Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein. -
overlay
= (Nur Chromium, kein Standard) Die Scroll-Leiste wird nicht neben den Inhalt gestellt, sondern überlagert ihn.
-
- Vererbung steuernde Werte
inherit
,initial
,unset
undrevert
- Standardwert
visible
- anwendbar auf
alle Elemente
- Vererbung
nein
- animierbar
nein
aside {
overflow: hidden;
width: 15em;
}
html
bzw. body
wird die Angabe overflow:visible
als overflow:auto
interpretiert.overflow
erweitert. overflow
ist jetzt eine Zusammenfassung der Einzeleigenschaften overflow-x
und overflow-y
.
p { overflow: hidden visible; }
p { overflow-x: hidden;
overflow-y: visible; }
overflow-x
einen Wert festlegen, wird automatisch der Wert für overflow-y
auf auto
anstelle des Standardwerts visible
gesetzt. Dies führt zu einer leichten vertikalen Verschiebung der nachfolgenden Elemente. Abhilfe schafft die Angabe overflow-y: visible
oder overflow: [wert] visible
.Siehe auch
Weblinks
- Spezifikation (W3C): overflow property
- MDN: overflow shorthand property
- Positionierung und Anzeige
- Abstände
- Benutzeroberfläche
- Container
- generierter Inhalt
- Größenangaben
- Box-Ausrichtung
- Flexbox Layout
- Grid Layout
- Hintergründe
- Listen
- Tabellen
- Scroll Snap
- Rahmen und Schatten
- Schriftformatierung
- Textformatierung
- Textausrichtung
- Umbruchsteuerung
- Transformationen
- Animationen