HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS -Tutorial

CSS-Startseite CSS-Einführung CSS-Syntax CSS-Selektoren CSS-Anleitung CSS-Kommentare CSS-Farben
Farben RGB VERHEXEN HSL
CSS-Hintergründe
Hintergrundfarbe Hintergrundbild Hintergrund Wiederholung Hintergrundanhang Hintergrund Kurzschrift
CSS-Grenzen
Grenzen Rahmenbreite Randfarbe Grenzseiten Grenzkurzschrift Abgerundete Ränder
CSS-Ränder
Ränder Margin Collapse
CSS-Padding CSS-Höhe/Breite CSS-Box-Modell CSS-Gliederung
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS-Text
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-Schriftarten
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-Icons CSS-Links CSS-Listen CSS-Tabellen
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS-Anzeige CSS Max-Breite CSS-Position CSS Z-Index CSS-Überlauf CSS-Float
Float Clear Float Examples
CSS Inline-Block CSS-Ausrichtung CSS-Kombinatoren CSS Pseudo-Klasse CSS Pseudo-Element CSS-Opazität CSS-Navigationsleiste
Navbar Vertical Navbar Horizontal Navbar
CSS-Dropdowns CSS-Bildergalerie CSS-Bild-Sprites CSS-Attribut-Selektoren CSS-Formulare CSS-Zähler CSS-Website-Layout CSS-Einheiten CSS-Spezifität CSS !wichtig CSS-Mathematikfunktionen

CSS-Erweitert

Abgerundete CSS-Ecken CSS-Randbilder CSS-Hintergründe CSS-Farben CSS-Farbschlüsselwörter CSS-Verläufe
Linear Gradients Radial Gradients Conic Gradients
CSS-Schatten
Shadow Effects Box Shadow
CSS-Texteffekte CSS-Webfonts CSS-2D-Transformationen CSS-3D-Transformationen CSS-Übergänge CSS-Animationen CSS-Tooltips Bilder im CSS-Stil CSS-Bildreflexion CSS-Objektanpassung CSS-Objektposition CSS-Maskierung CSS-Schaltflächen CSS-Paginierung CSS mehrere Spalten CSS-Benutzeroberfläche CSS-Variablen
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Größe von CSS-Boxen CSS-Medienabfragen CSS MQ-Beispiele CSS-Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS- responsiv

RWD-Einführung RWD-Ansichtsfenster RWD-Rasteransicht RWD-Medienabfragen RWD-Bilder RWD-Videos RWD-Frameworks RWD-Vorlagen

CSS -Raster

Grid-Einführung Grid-Container Rasterelement

CSS -SASS

SASS-Tutorial

CSS- Beispiele

CSS-Vorlagen CSS-Beispiele CSS-Quiz CSS-Übungen CSS-Zertifikat

CSS- Referenzen

CSS-Referenz CSS-Selektoren CSS-Funktionen CSS-Referenz Aural CSS-websichere Schriftarten CSS animierbar CSS-Einheiten CSS PX-EM-Konverter CSS-Farben CSS-Farbwerte CSS-Standardwerte CSS-Browser-Unterstützung

CSS -Layout - Überlauf

❮ Vorherige Nächste ❯

Die CSS overflow-Eigenschaft steuert, was mit Inhalt passiert, der zu groß ist, um in einen Bereich zu passen.

Dieser Text ist wirklich lang und die Höhe seines Containers beträgt nur 100 Pixel. Daher wird eine Bildlaufleiste hinzugefügt, um dem Leser zu helfen, den Inhalt zu scrollen. Der Schmerz selbst ist die Liebe Deshalb kommt es auf die Geringsten an, die unsere normale Praxis erträgt, um die Konsequenzen zu nutzen Der Schmerz des Schmerzes im Präsidium der Olympiade oder der Schmerz im Präsidium der Olympiade will ein Ärgernis für die Folgen sein, oder er leidet unter dem Schmerz des eu-Immunsystems an der Wahrheit, dem Eros und der Verbraucher und der regelmäßige Hass auf die zzril. Denn eine Freizeit, in der wir von unseren Teenagern befreit sind, ist keine Wahl Typen haben keine inhärente Klarheit

CSS-Überlauf

Die overflowEigenschaft gibt an, ob der Inhalt abgeschnitten oder Bildlaufleisten hinzugefügt werden soll, wenn der Inhalt eines Elements zu groß ist, um in den angegebenen Bereich zu passen.

Die overflowEigenschaft hat die folgenden Werte:

  • visible- Standard. Der Überlauf wird nicht abgeschnitten. Der Inhalt wird außerhalb der Box des Elements gerendert
  • hidden - Der Überlauf wird abgeschnitten und der Rest des Inhalts ist unsichtbar
  • scroll - Der Überlauf wird abgeschnitten und eine Bildlaufleiste hinzugefügt, um den Rest des Inhalts anzuzeigen
  • auto- Ähnlich wie scroll, fügt aber nur bei Bedarf Bildlaufleisten hinzu

Hinweis: Die overflowEigenschaft funktioniert nur für Blockelemente mit einer bestimmten Höhe.

Hinweis: In OS X Lion (auf Mac) sind Bildlaufleisten standardmäßig ausgeblendet und werden nur angezeigt, wenn sie verwendet werden (auch wenn „overflow:scroll“ eingestellt ist).

Überlauf: sichtbar

Standardmäßig ist der Überlauf visible, was bedeutet, dass er nicht beschnitten ist und außerhalb der Box des Elements gerendert wird:

Sie können die Overflow-Eigenschaft verwenden, wenn Sie das Layout besser steuern möchten. Die Overflow-Eigenschaft gibt an, was passiert, wenn der Inhalt die Box eines Elements überfüllt.

Beispiel

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

Überlauf versteckt

Mit dem hiddenWert wird der Überlauf abgeschnitten und der Rest des Inhalts ausgeblendet:

Beispiel

div {
  overflow: hidden;
}

Überlauf: scrollen

Wenn Sie den Wert auf festlegen scroll, wird der Überlauf abgeschnitten und eine Bildlaufleiste hinzugefügt, um innerhalb des Felds zu scrollen. Beachten Sie, dass dadurch sowohl horizontal als auch vertikal eine Bildlaufleiste hinzugefügt wird (auch wenn Sie sie nicht benötigen):

Sie können die Overflow-Eigenschaft verwenden, wenn Sie das Layout besser steuern möchten. Die Overflow-Eigenschaft gibt an, was passiert, wenn der Inhalt die Box eines Elements überfüllt.

Beispiel

div {
  overflow: scroll;
}

Überlauf: automatisch

Der autoWert ist ähnlich wie scroll, fügt aber nur bei Bedarf Bildlaufleisten hinzu:

Sie können die Overflow-Eigenschaft verwenden, wenn Sie das Layout besser steuern möchten. Die Overflow-Eigenschaft gibt an, was passiert, wenn der Inhalt die Box eines Elements überfüllt.

Beispiel

div {
  overflow: auto;
}

Überlauf-x und Überlauf-y

Die Eigenschaften overflow-xund overflow-ygeben an, ob der Inhaltsüberlauf nur horizontal oder vertikal (oder beides) geändert werden soll:

overflow-xgibt an, was mit den linken/rechten Rändern des Inhalts geschehen soll.
overflow-ygibt an, was mit den oberen/unteren Rändern des Inhalts geschehen soll.

Sie können die Overflow-Eigenschaft verwenden, wenn Sie das Layout besser steuern möchten. Die Overflow-Eigenschaft gibt an, was passiert, wenn der Inhalt die Box eines Elements überfüllt.

Beispiel

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

Testen Sie sich mit Übungen

Übung:

Erzwingen Sie mit class="intro" eine Bildlaufleiste zum <div>-Element.

<style>
.intro {
  width: 200px;
  height: 70px;
  : ;
}
</style>

<body>

<div class="intro">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio,
vitae scelerisque enim ligula venenatis dolor.
</div>

</body>

Alle CSS-Überlaufeigenschaften

Property Description
overflow Specifies what happens if content overflows an element's box
overflow-wrap Specifies whether or not the browser can break lines with long words, if they overflow its container
overflow-x Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element's content area


❮ Vorherige Nächste ❯