CSS-Overflow-x-Eigenschaft
Die Eigenschaft overflow-x legt fest, ob der Inhalt verborgen, sichtbar oder horizontal scrollbar sein soll, wenn der Inhalt die linken und rechten Ränder des Elements überläuft. Diese Eigenschaft ist eine der CSS3-Eigenschaften.
Die Eigenschaft overflow-x hat vier Hauptwerte: visible, scroll, auto und hidden.
INFO
Wenn die Eigenschaft overflow-y hidden, scroll oder auto ist und overflow-x standardmäßig visible ist, wird sie zu auto berechnet.
| Initial Value | visible |
|---|---|
| Applies to | Block-Container, flex-Container und grid-Container. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.overflowX = "visible"; |
Syntax
CSS overflow-x
css
overflow-x: visible | hidden | scroll | auto | initial | inherit;Beispiel für die Eigenschaft overflow-x:
CSS overflow-x code example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.example {
background-color: #1c87c9;
color: #fff;
width: 40px;
overflow-x: scroll;
}
</style>
</head>
<body>
<h2>Overflow-x property example</h2>
<h3>Overflow-x: scroll</h3>
<div class="example">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>Ergebnis
Beispiel für die Eigenschaft overflow-x mit dem Wert "visible":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.example {
background-color: #1c87c9;
color: #cccccc;
width: 40px;
overflow-x: visible;
}
</style>
</head>
<body>
<h2>Overflow-x property example</h2>
<h3>Overflow-x: visible</h3>
<div class="example">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>Beispiel für die Eigenschaft overflow-x mit dem Wert "hidden":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.example {
background-color: #1c87c9;
color: #fff;
width: 40px;
overflow-x: hidden;
}
</style>
</head>
<body>
<h2>Overflow-x property example</h2>
<h3>Overflow-x: hidden</h3>
<div class="example">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>Beispiel für die Eigenschaft overflow-x mit dem Wert "auto":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.example {
background-color: #1c87c9;
color: #fff;
width: 40px;
overflow-x: auto;
}
</style>
</head>
<body>
<h2>Overflow-x property example</h2>
<h3>Overflow-x: auto</h3>
<div class="example">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>Beispiel für die Eigenschaft overflow-x mit allen Werten:
CSS overflow-x all values example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.scroll {
background-color: #ccc;
width: 50px;
overflow-x: scroll;
}
div.hidden {
background-color: #ccc;
width: 50px;
overflow-x: hidden;
}
div.auto {
background-color: #ccc;
width: 50px;
overflow-x: auto;
}
div.visible {
background-color: #ccc;
width: 50px;
overflow-x: visible;
}
</style>
</head>
<body>
<h2>Overflow-x property example</h2>
<h3>overflow-x: scroll</h3>
<div class="scroll">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<h3>overflow-x: hidden</h3>
<div class="hidden">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<h3>overflow-x: auto</h3>
<div class="auto">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<h3>overflow-x: visible</h3>
<div class="visible">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>Werte
| Value | Description | Play it |
|---|---|---|
| visible | Der Inhalt wird nicht abgeschnitten und wird außerhalb der linken und rechten Ränder des Padding-Box-Bereichs dargestellt. Dies ist der Standardwert dieser Eigenschaft. | Play it » |
| hidden | Der Inhalt wird abgeschnitten, um horizontal in die Padding-Box zu passen. Es wird keine Bildlaufleiste hinzugefügt. | Play it » |
| scroll | Der Inhalt wird abgeschnitten, um horizontal in die Padding-Box zu passen. Die Bildlaufleiste wird hinzugefügt, um den restlichen Inhalt anzuzeigen. | Play it » |
| auto | Der Inhalt wird abgeschnitten, um horizontal in die Padding-Box zu passen. Eine Bildlaufleiste wird nur hinzugefügt, wenn der Inhalt überläuft. | Play it » |
| initial | Veranlasst die Eigenschaft, ihren Standardwert zu verwenden. | Play it » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
Which of the followings is not a value for the overflow-x property ?