overflow

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;
}

Bestandteile

Diese Eigenschaft ist eine Kurzschreibweise 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 spezifiziert. Wenn nur ein Schlüsselwort angegeben wird, werden sowohl overflow-x als auch overflow-y auf denselben Wert gesetzt. Wenn zwei Schlüsselwörter angegeben werden, gilt der erste Wert für overflow-x in der horizontalen Richtung und der zweite für overflow-y in der vertikalen Richtung.

Werte

visible

Überlaufender Inhalt wird nicht abgeschnitten und kann außerhalb des Randabstandes des Elements sichtbar sein. Die Elementbox ist kein Scroll-Container. Dies ist der Standardwert der overflow-Eigenschaft.

hidden

Überlaufender Inhalt wird am Randabstand 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 Scrollleisten hinzu und erlauben auch nicht, dass Benutzer den Inhalt außerhalb des abgeschnittenen Bereichs durch Aktionen wie Ziehen auf einem Touchscreen oder Verwenden des Scrollrads einer Maus betrachten. Der Inhalt kann jedoch programmgesteuert gescrollt werden (z. B. durch Verlinken auf Ankertext, durch Tabben zu einem versteckten, aber fokussierbaren Element oder durch Setzen des Werts der scrollLeft-Eigenschaft oder der scrollTo()-Methode), in diesem Fall ist die Elementbox ein Scroll-Container.

clip

Überlaufender Inhalt wird an der overflow clip edge des Elements abgeschnitten, die mit der Eigenschaft overflow-clip-margin definiert wird. Dadurch überläuft der Inhalt den Randabstand des Elements um den <length>-Wert von overflow-clip-margin oder um 0px, wenn nicht gesetzt. Überlaufender Inhalt außerhalb des abgeschnittenen Bereichs ist nicht sichtbar, Benutzeragenten fügen keine Scrollleiste hinzu, und programmgesteuertes Scrollen wird ebenfalls nicht unterstützt. Es wird kein neuer Formatierungskontext erstellt. Um einen Formatierungskontext zu erstellen, verwenden Sie overflow: clip zusammen mit display: flow-root. Die Elementbox ist kein Scroll-Container.

scroll

Überlaufender Inhalt wird am Randabstand des Elements abgeschnitten, und Überlaufinhalt kann mithilfe von Scrollleisten in den sichtbaren Bereich gescrollt werden. Benutzeragenten zeigen Scrollleisten an, unabhängig davon, ob Inhalt überläuft oder nicht, also in den horizontalen und vertikalen Richtungen, falls der Wert auf beide Richtungen zutrifft. Durch die Verwendung dieses Schlüsselworts kann verhindert werden, dass Scrollleisten erscheinen und verschwinden, wenn sich der Inhalt ändert. Drucker können dennoch überlaufenden Inhalt drucken. Die Elementbox ist ein Scroll-Container.

auto

Überlaufender Inhalt wird am Randabstand des Elements abgeschnitten, und Überlaufinhalt kann mithilfe von Scrollleisten in den sichtbaren Bereich gescrollt werden. Anders als bei scroll zeigen Benutzeragenten Scrollleisten nur an, wenn der Inhalt überläuft. Wenn der Inhalt in den Randabstand des Elements passt, sieht es aus wie bei visible, aber es wird dennoch ein neuer Formatierungskontext erstellt. Die Elementbox ist ein Scroll-Container.

Beschreibung

Überlaufoptionen umfassen das Verbergen von Überlaufinhalt, das Aktivieren von Scrollleisten, um Überlaufinhalt anzuzeigen, oder das Anzeigen des Inhalts, der aus einer Elementbox in den umgebenden Bereich fließt, sowie deren Kombinationen.

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

• Das Festlegen eines anderen Werts als visible (dem Standardwert) oder clip für overflow erstellt einen neuen block-formatierungskontext. Dies ist aus technischen Gründen notwendig; wenn ein Float ein rollendes Element schneidet, würde es den Inhalt nach jedem Scrollschritt zwangsweise neu umbrechen, was zu einem langsamen Scroll-Erlebnis führen würde.
• Damit eine overflow-Einstellung die gewünschte Wirkung erzielt, muss das Block-Element entweder eine festgelegte Höhe (height oder max-height) haben, wenn der Überlauf in vertikaler Richtung erfolgt, eine festgelegte Breite (width oder max-width) in horizontaler Richtung, eine festgelegte Blockgröße ((block-size oder max-block-size) bei Überlauf in Blockrichtung, oder eine festgelegte Inline-Größe ((inline-size oder max-inline-size) oder white-space auf nowrap gesetzt, wenn der Überlauf in Inline-Richtung erfolgt.
• Das Festlegen von overflow auf visible in einer Richtung (d.h. overflow-x oder overflow-y), wenn es nicht in der anderen Richtung auf visible oder clip festgelegt ist, führt dazu, dass sich der visible-Wert wie auto verhält.
• Das Festlegen von overflow auf clip in einer Richtung, wenn es nicht in der anderen Richtung auf visible oder clip festgelegt ist, führt dazu, dass sich der clip-Wert wie hidden verhält.
• Die JavaScript-Eigenschaft Element.scrollTop kann verwendet werden, um durch Inhalte in einem Scroll-Container zu scrollen, außer wenn overflow auf clip gesetzt ist.
• Das Festlegen von overflow auf Bildern und anderen ersetzten Elementen funktioniert wie erwartet in Browsern, die das CSS Overflow Module Level 4 unterstützen; in früheren Versionen der Spezifikation wurden ersetzte Elemente immer auf den begrenzenden Container beschnitten. 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 scrollbarer Inhaltsbereich ist nicht über die Tastatur fokusierbar, sodass er von einem Benutzer, der nur die Tastatur verwendet, nicht gescrollt werden kann. Firefox und Chrome ab Version 132 sind Ausnahmen; sie machen Scroll-Container standardmäßig fokusierbar.

Für andere Browser müssen Sie einen tabindex auf den Container setzen, um es Tastaturbenutzern zu ermöglichen, den Container zu scrollen, indem Sie tabindex="0" verwenden. Leider kann es bei einem Screenreader, der auf diesen Tabstopp stößt, an Kontext über den Container fehlen und möglicherweise wird der gesamte Inhalt des Containers angekündigt. 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 verschiedener 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
• Nur-Tastatur-Scrollbereiche auf adrianroselli.com (2022)