1. Web
  2. CSS
  3. Reference
  4. Values
  5. <overflow>

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<overflow>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Der <overflow> aufzählbare Wertetyp repräsentiert die Schlüsselwortwerte für die overflow-block, overflow-inline, overflow-x und overflow-y Langhand-Eigenschaften und die overflow Kurzschreibweise-Eigenschaft. Diese Eigenschaften gelten für Blockcontainer, Flexcontainer und Grid-Container.

Syntax

<overflow> = visible | hidden | clip | scroll | auto

Werte

Der <overflow> aufzählbare Wertetyp wird durch einen der unten aufgeführten Werte angegeben.

visible

Überlaufender Inhalt wird nicht abgeschnitten und kann außerhalb des Padding-Bereichs des Elements sichtbar sein. Die Elementbox ist kein Scrollcontainer. Dies ist der Standardwert für alle Eigenschaften, die den <overflow> aufzählbaren Wertetyp haben.

hidden

Überlaufender Inhalt wird an der Padding-Box des Elements abgeschnitten. Es gibt keine Scrollleisten, und der abgeschnittene Inhalt ist nicht sichtbar (d.h. der abgeschnittene Inhalt ist versteckt), aber der Inhalt existiert weiterhin. Benutzeragenten fügen keine Scrollbars hinzu und erlauben Benutzern auch nicht, den Inhalt außerhalb des abgeschnittenen Bereichs durch Aktionen wie das Ziehen auf einem Touchscreen oder die Verwendung des Scrollrades auf einer Maus zu sehen. Der Inhalt kann programmatisch gescrollt werden (zum Beispiel durch Einstellen des Wertes der scrollLeft Eigenschaft oder der scrollTo() Methode). Der Inhalt kann auch über Tastaturinteraktionen gescrollt werden; Pfeile ermöglichen das Scrollen durch den Inhalt und das Übergehen zu einem fokussierbaren Element innerhalb des versteckten Inhalts ermöglicht das Scrollen des fokussierten Elements in den Blick. Die Elementbox, auf der dieser Wert gesetzt ist, ist ein Scrollcontainer.

clip

Überlaufender Inhalt wird am Overflow-Clip-Rand des Elements abgeschnitten, der mit der overflow-clip-margin Eigenschaft definiert ist. Infolgedessen überläuft der Inhalt die Padding-Box des Elements um den <length>-Wert von overflow-clip-margin oder um 0px, falls nicht gesetzt. Überlaufender Inhalt außerhalb des abgeschnittenen Bereichs ist nicht sichtbar, Benutzeragenten fügen keine Scrollbar hinzu, und auch programmatisches Scrollen wird nicht unterstützt. Kein neuer Formatierungskontext wird erstellt.

scroll

Überlaufender Inhalt wird an der Padding-Box des Elements abgeschnitten, und überlaufender Inhalt kann durch Scrollbars sichtbar gemacht werden. Benutzeragenten zeigen Scrollbars sowohl in horizontaler als auch in vertikaler Richtung an, wenn nur ein Wert festgelegt ist, unabhängig davon, ob Inhalt überläuft oder abgeschnitten ist. Die Verwendung dieses Schlüsselwortwerts kann daher verhindern, dass Scrollbars erscheinen und verschwinden, während sich der Inhalt ändert. Drucker können überlaufenden Inhalt trotzdem drucken. Die Elementbox, auf der dieser Wert gesetzt ist, ist ein Scrollcontainer.

auto

Überlaufender Inhalt wird an der Padding-Box des Elements abgeschnitten, und überlaufender Inhalt kann sicht gemacht werden. Anders als bei scroll zeigen Benutzeragenten Scrollbars nur dann an, wenn der Inhalt überläuft, und verstecken Scrollbars standardmäßig. Wenn der Inhalt in die Padding-Box des Elements passt, sieht es genauso aus wie bei visible, aber es wird trotzdem ein neuer Formatierungskontext erstellt. Die Elementbox, auf der dieser Wert gesetzt ist, ist ein Scrollcontainer.

Hinweis: Der Schlüsselwortwert overlay ist ein veralteter Wertalias für auto. Mit overlay werden die Scrollbars über dem Inhalt gezeichnet, anstatt Platz zu beanspruchen.

Beispiele

Dieses Beispiel zeigt alle <overflow> aufzählbaren Werte für die overflow Eigenschaft.

HTML

Das HTML in diesem Beispiel enthält einige Liedtexte innerhalb des <pre> Elements. Das HTML enthält auch einen Linktext, um das Testen der Auswirkungen des Tastaturfokus auf Überlauf- und Scrollverhalten zu ermöglichen. Der gleiche HTML-Code wird mehrfach wiederholt, um den Effekt jedes <overflow> aufzählbaren Werts zu zeigen.

html
<pre>&nbsp;
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you

Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true

Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby

<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>

CSS

Für Demonstrationszwecke wurde die Größe der <pre>-Elementbox definiert, um sicherzustellen, dass der Inhalt seinen Container in sowohl der Inline- als auch der Blockrichtung überläuft. Ein anderer <overflow> Wert wird für jedes der wiederholten <pre>-Elemente gesetzt. Für die Demonstration des clip-Wertes wurde ein overflow-clip-margin hinzugefügt.

css
pre {
  block-size: 100px;
  inline-size: 295px;
}

pre:nth-of-type(1) {
  overflow: hidden;
}
pre:nth-of-type(1)::before {
  content: "hidden: ";
}

pre:nth-of-type(2) {
  overflow: clip;
  overflow-clip-margin: 1em;
}
pre:nth-of-type(2)::before {
  content: "clip: ";
}

pre:nth-of-type(3) {
  overflow: scroll;
}
pre:nth-of-type(3)::before {
  content: "scroll: ";
}

pre:nth-of-type(4) {
  overflow: auto;
}
pre:nth-of-type(4)::before {
  content: "auto: ";
}

pre:nth-of-type(5) {
  overflow: clip;
  overflow: overlay;
  overflow-clip-margin: 3em;
}
pre:nth-of-type(5)::before {
  content: "overlay (or clip if not supported): ";
}

pre:nth-of-type(6) {
  overflow: visible;
}
pre:nth-of-type(6)::before {
  content: "visible: ";
}

Ergebnis

Um die Auswirkung des Tastaturfokus auf Überlauf- und Scrollverhalten zu sehen, versuchen Sie, durch alle Links im Beispiel zu tabben. Beachten Sie, dass die clip-Box keinen Scrollcontainer erstellt und der Link nicht in den Blick kommt, wenn der Link fokussiert ist. Der visible-Wert, der den Link immer in Sichtweite hat, ist ebenfalls kein Scrollcontainer.

Spezifikationen

Specification
CSS Overflow Module Level 3
# propdef-overflow

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden