CSS-Layout - Überlauf

CSS overflow-Attribut kontrolliert die Behandlung von Inhalten, die zu groß sind, um in den Bereich zu passen.

Dieser Text ist sehr lang und der Container hat eine Höhe von nur 100 Pixeln. Daher wurde ein Scrollbalken hinzugefügt, um dem Leser das Scrollen des Inhalts zu erleichtern. Dieser Text ist sehr lang und der Container hat eine Höhe von nur 100 Pixeln. Daher wurde ein Scrollbalken hinzugefügt, um dem Leser das Scrollen des Inhalts zu erleichtern. Dieser Text ist sehr lang und der Container hat eine Höhe von nur 100 Pixeln. Daher wurde ein Scrollbalken hinzugefügt, um dem Leser das Scrollen des Inhalts zu erleichtern. Dieser Text ist sehr lang und der Container hat eine Höhe von nur 100 Pixeln. Daher wurde ein Scrollbalken hinzugefügt, um dem Leser das Scrollen des Inhalts zu erleichtern. Dieser Text ist sehr lang und der Container hat eine Höhe von nur 100 Pixeln. Daher wurde ein Scrollbalken hinzugefügt, um dem Leser das Scrollen des Inhalts zu erleichtern. Dieser Text ist sehr lang und der Container hat eine Höhe von nur 100 Pixeln. Daher wurde ein Scrollbalken hinzugefügt, um dem Leser das Scrollen des Inhalts zu erleichtern. Dieser Text ist sehr lang und der Container hat eine Höhe von nur 100 Pixeln. Daher wurde ein Scrollbalken hinzugefügt, um dem Leser das Scrollen des Inhalts zu erleichtern. Dieser Text ist sehr lang und der Container hat eine Höhe von nur 100 Pixeln. Daher wurde ein Scrollbalken hinzugefügt, um dem Leser das Scrollen des Inhalts zu erleichtern. Dieser Text ist sehr lang und der Container hat eine Höhe von nur 100 Pixeln. Daher wurde ein Scrollbalken hinzugefügt, um dem Leser das Scrollen des Inhalts zu erleichtern. Dieser Text ist sehr lang und der Container hat eine Höhe von nur 100 Pixeln. Daher wurde ein Scrollbalken hinzugefügt, um dem Leser das Scrollen des Inhalts zu erleichtern. Dieser Text ist sehr lang und der Container hat eine Höhe von nur 100 Pixeln. Daher wurde ein Scrollbalken hinzugefügt, um dem Leser das Scrollen des Inhalts zu erleichtern.

Selbst ausprobieren

CSS Overflow

overflow Das Attribut bestimmt, ob der Inhalt abgeschnitten wird oder ein Scrollbalken hinzugefügt wird, wenn der Inhalt zu groß ist, um in das angegebene Bereich zu passen.

overflow Das Attribut kann folgende Werte setzen:

  • visible - Standard. Der Überlauf wird nicht abgeschnitten. Der Inhalt wird außerhalb des Rahmens gerendert
  • hidden - Der Inhalt wird abgeschnitten und der Rest des Inhalts ist nicht sichtbar
  • scroll - Der Inhalt wird abgeschnitten und ein Scrollbalken hinzugefügt, um den Rest des Inhalts anzuzeigen
  • auto - Mit scroll Ähnlich, aber nur bei Bedarf Scrollbalken hinzufügen

Anmerkung:overflow Das Attribut gilt nur für Blockelemente mit angegebener Höhe.

Anmerkung:In OS X Lion (auf dem Mac) ist der Scrollbalken standardmäßig ausgeblendet und wird nur angezeigt, wenn er verwendet wird (selbst wenn "overflow:scroll" gesetzt ist).

overflow: visible

Standardmäßig ist der Überlauf sichtbar (visible) bedeutet das, dass es nicht abgeschnitten wird, sondern außerhalb des Rahmens gerendert wird:

Wenn Sie die Layoutsteuerung verbessern möchten, können Sie das overflow-Attribut verwenden. Das overflow-Attribut bestimmt, was passiert, wenn der Inhalt über den Rahmen des Elements hinausgeht.

Beispiel

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

Selbst ausprobieren

overflow: hidden

Wenn hidden gesetzt wird, wird der Inhalt abgeschnitten und der Rest des Inhalts wird ausgeblendet:

Wenn Sie die Layoutsteuerung verbessern möchten, können Sie das overflow-Attribut verwenden. Das overflow-Attribut bestimmt, was passiert, wenn der Inhalt über den Rahmen des Elements hinausgeht.

Beispiel

div {
  overflow: hidden;
}

Selbst ausprobieren

overflow: scroll

Wenn der Wert auf scrollWird der Inhalt abgeschnitten und ein Scrollbalken hinzugefügt, um im Rahmen zu scrollen. Beachten Sie, dass dies sowohl horizontal als auch vertikal einen Scrollbalken hinzufügt (selbst wenn Sie keinen benötigen):

Wenn Sie die Layoutsteuerung verbessern möchten, können Sie das overflow-Attribut verwenden. Das overflow-Attribut bestimmt, was passiert, wenn der Inhalt über den Rahmen des Elements hinausgeht.

Beispiel

div {
  overflow: scroll;
}

Selbst ausprobieren

overflow: auto

auto Der Wert ähnelt scrollaber es fügt nur bei Bedarf einen Scrollbalken hinzu:

Wenn Sie die Layoutsteuerung verbessern möchten, können Sie das overflow-Attribut verwenden. Das overflow-Attribut bestimmt, was passiert, wenn der Inhalt über den Rahmen des Elements hinausgeht.

Beispiel

div {
  overflow: auto;
}

Selbst ausprobieren

overflow-x und overflow-y

overflow-x und overflow-y Das Attribut legt fest, ob der Inhalt horizontal, vertikal (oder beides) verändert wird, wenn er über den Rahmen hinausgeht:

  • overflow-x Bestimmt, wie die linken und rechten Ränder des Inhalts behandelt werden.
  • overflow-y Bestimmt, wie die oberen und unteren Ränder des Inhalts behandelt werden.
Wenn Sie die Layoutsteuerung verbessern möchten, können Sie das overflow-Attribut verwenden. Das overflow-Attribut bestimmt, was passiert, wenn der Inhalt über den Rahmen des Elements hinausgeht.

Beispiel

div {
  overflow-x: hidden; /* Verbirgt den horizontalen Rollbalken */
  overflow-y: scroll; /* Fügt einen vertikalen Rollbalken hinzu */
}

Selbst ausprobieren

Alle CSS Overflow Eigenschaften

Eigenschaft Beschreibung
overflow Bestimmt, was passiert, wenn der Inhalt über den Rahmen des Elements hinausgeht.
overflow-x Bestimmt, wie der Inhalt bei Überlauf des Inhaltbereichs der Elemente links/rechts behandelt wird.
overflow-y Bestimmt, wie der Inhalt bei Überlauf des Inhaltbereichs der Elemente oben/unten behandelt wird.