overflow CSS-Eigenschaft

Probieren Sie es aus

overflow: visible;

overflow: hidden;

overflow: clip;

overflow: scroll;

overflow: auto;

<section class="default-example" id="default-example">
  <p id="example-element">
    Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's
    Inn Hall. Implacable November weather. As much mud in the streets as if the
    waters had but newly retired from the face of the earth.
  </p>
</section>

#example-element {
  width: 15em;
  height: 9em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
}

Zugehörige Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

• overflow-x
• overflow-y

Syntax

/* Keyword values */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

Die overflow-Eigenschaft wird als ein oder zwei <overflow> Schlüsselwortwerte angegeben. Wenn nur ein Schlüsselwort angegeben ist, werden sowohl overflow-x als auch overflow-y auf denselben Wert gesetzt. Wenn zwei Schlüsselwörter angegeben sind, gilt der erste Wert für overflow-x in der horizontalen Richtung und der zweite gilt für overflow-y in der vertikalen Richtung.

Werte

visible

Überlaufender Inhalt wird nicht abgeschnitten und kann außerhalb des Padding-Bereichs des Elements sichtbar sein. Der Elementkasten ist kein scroll container. Dies ist der Standardwert der overflow-Eigenschaft.

hidden

Überlaufender Inhalt wird am Rand des Padding-Bereichs des Elements abgeschnitten. Es gibt keine Scrollleisten, und der abgeschnittene Inhalt ist nicht sichtbar (d.h. abgeschnittener Inhalt wird ausgeblendet), aber der Inhalt existiert weiterhin. Benutzeragenten fügen keine Scrollleisten hinzu und ermöglichen den Benutzern auch nicht, den Inhalt außerhalb des abgeschnittenen Bereichs durch Aktionen wie Dragging auf einem Touchscreen oder Verwenden des Scrollrads einer Maus zu sehen. Der Inhalt kann jedoch programmatisch gescrollt werden (zum Beispiel durch Verlinken auf Ankertext, durch Tabben zu einem versteckten, aber fokussierbaren Element oder durch Setzen des Wertes der scrollLeft-Eigenschaft oder der scrollTo()-Methode), in diesem Fall ist der Elementkasten ein Scrollcontainer.

clip

Überlaufender Inhalt wird am overflow clip edge des Elements abgeschnitten, der mit der overflow-clip-margin Eigenschaft definiert wird. Infolgedessen überläuft der Inhalt den Padding-Bereich des Elements um den <length> Wert von overflow-clip-margin oder um 0px, wenn nicht festgelegt. Überlaufender Inhalt außerhalb des abgeschnittenen Bereichs ist nicht sichtbar, Benutzeragenten fügen keine Scrollleiste hinzu, und programmatisches Scrollen wird ebenfalls nicht unterstützt. Es wird kein neuer formatting context erstellt. Um einen Formatierungskontext zu erstellen, verwenden Sie overflow: clip zusammen mit display: flow-root. Der Elementkasten ist kein Scrollcontainer.

scroll

Überlaufender Inhalt wird am Rand des Padding-Bereichs des Elements abgeschnitten, und überlaufender Inhalt kann mit Scrollleisten in den Sichtbereich gescrollt werden. Benutzeragenten zeigen Scrollleisten an, unabhängig davon, ob Inhalt überläuft oder nicht, also in der horizontalen und vertikalen Richtung, wenn der Wert für beide Richtungen gilt. Die Verwendung dieses Schlüsselworts kann daher verhindern, dass Scrollleisten erscheinen und verschwinden, wenn sich der Inhalt ändert. Drucker können dennoch überlaufenden Inhalt drucken. Der Elementkasten ist ein Scrollcontainer.

auto

Überlaufender Inhalt wird am Rand des Padding-Bereichs des Elements abgeschnitten, und überlaufender Inhalt kann mit Scrollleisten in den Sichtbereich gescrollt werden. Im Gegensatz zu scroll zeigen Benutzeragenten Scrollleisten nur dann an, wenn der Inhalt überläuft. Wenn der Inhalt in den Padding-Bereich des Elements passt, sieht es genauso aus wie bei visible, erstellt jedoch immer noch einen neuen Formatierungskontext. Der Elementkasten ist ein Scrollcontainer.

Beschreibung

Die Überlaufoptionen umfassen das Ausblenden von Überlaufinhalten, das Aktivieren von Scrollleisten, um Überlaufinhalte anzuzeigen, oder das Anzeigen des Inhaltes, der über einen Elementkasten hinaus in die umliegende Fläche fließt, sowie Kombinationen davon.

Die folgenden Nuancen sollten beim Verwenden der verschiedenen Schlüsselwörter für overflow beachtet werden:

• Das Festlegen eines anderen Wertes als visible (dem Standard) oder clip für overflow erstellt einen neuen Block Formatierungskontext. Dies ist aus technischen Gründen notwendig; wenn ein Float mit einem scrollenden Element kollidiert, würde es den Inhalt nach jedem Scroll-Schritt zwangsweise neu umwickeln, was zu einem langsamen Scrollerlebnis führt.
• Damit eine overflow-Einstellung die gewünschte Wirkung hat, muss das Block-Level-Element entweder eine festgelegte Höhe (height oder max-height) haben, wenn der Überlauf in der vertikalen Richtung ist, eine festgelegte Breite (width oder max-width) haben, wenn der Überlauf in der horizontalen Richtung ist, eine festgelegte Blockgröße ((block-size oder max-block-size), wenn der Überlauf in der Block-Richtung ist, oder eine festgelegte Inline-Größe ((inline-size oder max-inline-size) oder white-space auf nowrap gesetzt haben, wenn der Überlauf in der Inline-Richtung ist.
• Das Festlegen von overflow auf visible in einer Richtung (d.h. overflow-x oder overflow-y), wenn es in der anderen Richtung nicht auf visible oder clip eingestellt ist, führt dazu, dass sich der visible-Wert wie auto verhält.
• Das Festlegen von overflow auf clip in einer Richtung führt dazu, dass sich der clip-Wert wie hidden verhält, wenn er in der anderen Richtung nicht auf visible oder clip eingestellt ist.
• Die JavaScript-Eigenschaft Element.scrollTop kann verwendet werden, um durch den Inhalt in einem Scrollcontainer zu scrollen, außer wenn overflow auf clip gesetzt ist.
• Das Setzen von overflow auf Bilder und andere ersetzte Elemente funktioniert wie erwartet in Browsern, die das CSS Overflow Module Level 4 unterstützen; in früheren Versionen der Spezifikation wurden ersetzte Elemente immer an den Rand des Containers abgeschnitten. Siehe Browser-Kompatibilität für unterstützende Browser.

Formale Definition

Formale Syntax

overflow = 
  <'overflow-block'>{1,2}  

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

Barrierefreiheit

Ein scrollender Inhaltsbereich ist nicht über die Tastatur fokussierbar, sodass er von einem reinen Tastaturbenutzer nicht gescrollt werden kann. Firefox und Chrome 132 und höher sind Ausnahmen; sie machen Scrollcontainer standardmäßig fokussierbar.

Für andere Browser müssen Sie, um reinen Tastaturbenutzern das Scrollen im Container zu ermöglichen, dem Container einen tabindex mit tabindex="0" zuweisen. Leider hat ein Screenreader möglicherweise keinen Kontext über den Container, wenn er auf dieser Tabulatortaste stoppt, und könnte möglicherweise den gesamten Inhalt des Containers ankündigen. Um dies zu mildern, geben Sie dem Container eine geeignete WAI-ARIA-Rolle (role="region", zum Beispiel) und einen zugänglichen Namen (über aria-label oder aria-labelledby).

Beispiele

Demonstration der Ergebnisse der verschiedenen overflow-Schlüsselwörter

HTML

<div>
  <code>visible</code>
  <p class="visible">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>clip</code>
  <p class="clip">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>overlay</code>
  <p class="overlay">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

div {
  margin: 2em;
  font-size: 1.2em;
}

p {
  width: 5em;
  height: 5em;
  border: dotted;
  margin-top: 0.5em;
}

div:nth-of-type(5),
div:nth-of-type(6) {
  margin-top: 200px;
}

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.clip {
  overflow: clip;
  overflow-clip-margin: 1em;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}

p.overlay {
  overflow: overlay;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• overflow-x, overflow-y
• overflow-block, overflow-clip-margin, overflow-inline
• clip, display, text-overflow, white-space
• SVG overflow Attribut
• CSS overflow Modul
• Tastaturbasierte Scrollbereiche auf adrianroselli.com (2022)