CSS-Overflow-Eigenschaft
Die Eigenschaft overflow definiert das Verhalten von Inhalt, der den Rahmen des Elements überläuft. Diese Eigenschaft funktioniert nur bei Block-Elementen mit einer festgelegten Höhe.
Sie legt fest, ob der Inhalt beschnitten werden soll, um in das Element zu passen, oder ob dem Element Scrollleisten hinzugefügt werden sollen.
Dies ist eine Kurzform für die folgenden Eigenschaften:
Der Inhalt läuft über, wenn der Container eine festgelegte height und width hat.
Die Eigenschaft overflow hat die folgenden Werte:
- visible
- hidden
- scroll
- auto
- overlay
DANGER
Der Wert "Overlay" ist veraltet.
Eine der Verwendungen von overflow ist das Bereinigen von Floats. Das Festlegen von overflow clear jedoch nicht den float des Elements. Das Element mit einem overflow-Wert ungleich "visible" wird so groß erweitert, wie es nötig ist, um schwebende Kindelemente einzuschließen, vorausgesetzt, die Höhe ist nicht angegeben.
Die Eigenschaft overflow kann auch einen Block-Formatierungskontext erzeugen. Sie ist nützlich in Fällen, in denen wir ein Block-Element neben einem schwebenden Element ausrichten möchten.
| Initial Value | visible |
|---|---|
| Applies to | Block containers, flex containers and grid containers. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | Object.style.overflow = "auto"; |
Syntax
CSS overflow syntax
css
overflow: visible | hidden | scroll | auto | overlay | initial | inherit;Beispiel der Eigenschaft overflow mit dem Wert "visible":
CSS overflow code example
html
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: #ccc;
width: 300px;
height: 200px;
overflow: visible;
}
</style>
</head>
<body>
<h2>Overflow property example</h2>
<h3>overflow: visible</h3>
<p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>Ergebnis
Beispiel der Eigenschaft overflow mit dem Wert "scroll":
CSS overflow scroll example
html
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: #ccc;
width: 300px;
height: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<h2>Overflow property example</h2>
<h3>overflow: scroll</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>Im folgenden Beispiel schneidet der angewendete Wert den Inhalt so zu, dass er in das Feld passt.
Beispiel der Eigenschaft overflow mit dem Wert "hidden":
CSS overflow hidden example
html
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: #ccc;
width: 300px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Overflow property example</h2>
<h3>overflow: hidden</h3>
<p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>Beispiel der Eigenschaft overflow mit dem Wert "auto":
CSS overflow auto
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.scroll {
width: 200px;
height: 300px;
border: 1px solid;
overflow: auto;
margin-bottom: 10px;
}
.scroll-x {
width: 200px;
height: 300px;
border: 1px solid;
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 10px;
}
.scroll-y {
width: 200px;
height: 300px;
border: 1px solid;
overflow-y: auto;
margin-bottom: 10px;
}
.scroll>div {
width: 400px;
height: 50px;
background: #ccc;
}
.scroll-y>div {
width: 200px;
height: 50px;
background: #ccc;
}
.scroll-x>div {
width: 400px;
height: 50px;
background: #ccc;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Example with Overflow Property</h1>
<h2>overflow overflow scroll auto</h2>
<div class="scroll">
<h2>Overflow Property </h2>
<div>
<h2>overflow scroll property</h2>
</div>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<h2>overflow overflow-x auto</h2>
<div class="scroll-x">
<h2>Overflow Property </h2>
<div>
<h2>overflow scroll-x property</h2>
</div>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer.
</p>
</div>
<h2>overflow overflow-y auto</h2>
<div class="scroll-y">
<h2>Overflow Property </h2>
<div>
<h2>overflow scroll-y property</h2>
</div>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. software like Aldus PageMaker including versions of Lorem Ipsum.but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</body>
</html>Beispiel der Eigenschaft overflow mit allen Werten:
CSS overflow all values example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.scroll {
background-color: #eee;
width: 300px;
height: 200px;
overflow: scroll;
}
div.hidden {
background-color: #eee;
width: 300px;
height: 200px;
overflow: hidden;
}
div.auto {
background-color: #eee;
width: 300px;
height: 200px;
overflow: auto;
}
div.visible {
background-color: #eee;
width: 300px;
height: 200px;
overflow: visible;
}
div.overlay {
background-color: #eee;
width: 300px;
height: 200px;
overflow: overlay;
}
</style>
</head>
<body>
<h2>Overflow property example</h2>
<h3>overflow: scroll</h3>
<div class="scroll">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1 500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>overflow: hidden</h3>
<div class="hidden">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>overflow: auto</h3>
<div class="auto">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>overflow: visible</h3>
<div class="visible">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<br />
<br />
<h3>overflow: overlay</h3>
<div class="overlay">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Werte
| Value | Description | Play it |
|---|---|---|
| visible | Der Inhalt wird nicht beschnitten und wird außerhalb des Innenabstandsrahmens dargestellt. Dies ist der Standardwert dieser Eigenschaft. | Play it » |
| hidden | Der Inhalt wird beschnitten, um in den Innenabstandsrahmen zu passen. | Play it » |
| scroll | Die Scrollleiste wird hinzugefügt, um den restlichen Inhalt anzuzeigen. | Play it » |
| auto | Hängt vom Browser ab. Wenn der Inhalt überläuft, wird eine Scrollleiste hinzugefügt. | Play it » |
| overlay | Funktioniert wie auto, aber die Scrollleisten werden über dem Inhalt statt daneben gezeichnet. Dieser veraltete Wert darf nicht mehr verwendet werden, obwohl er möglicherweise noch funktioniert. | Play it » |
| initial | Veranlasst die Eigenschaft, ihren Standardwert zu verwenden. | Play it » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
Was macht die CSS-Eigenschaft overflow?