overflow-block CSS property
Baseline
2025
*
Neu verfügbar
Seit September 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die overflow-block CSS-Eigenschaft legt fest, was angezeigt wird, wenn der Inhalt die Blockstart- und Blockendkanten einer Box überläuft. Dies kann nichts, eine Scrollleiste oder der überlaufende Inhalt sein.
Hinweis:
Die overflow-block-Eigenschaft wird je nach Schreibmodus des Dokuments auf overflow-y oder overflow-x abgebildet.
Syntax
/* Keyword values */
overflow-block: visible;
overflow-block: hidden;
overflow-block: clip;
overflow-block: scroll;
overflow-block: auto;
/* Global values */
overflow-block: inherit;
overflow-block: initial;
overflow-block: revert;
overflow-block: revert-layer;
overflow-block: unset;
Die overflow-block-Eigenschaft wird als einzelnes Schlüsselwort des Typs <overflow> angegeben:
Werte
visible-
Der Inhalt wird nicht abgeschnitten und kann außerhalb der Blockstart- und Blockendkanten der Padding-Box dargestellt werden.
-
Der Inhalt wird bei Bedarf abgeschnitten, um in die Blockdimension der Padding-Box zu passen. Es werden keine Scrollleisten bereitgestellt.
clip-
Überlaufender Inhalt wird an der Überlauf-Clipping-Kante des Elements abgeschnitten, die durch die
overflow-clip-margin-Eigenschaft definiert wird. scroll-
Der Inhalt wird bei Bedarf abgeschnitten, um in die Blockdimension der Padding-Box zu passen. Browser zeigen Scrollleisten an, unabhängig davon, ob tatsächlich Inhalt abgeschnitten wird. (Dies verhindert, dass Scrollleisten erscheinen oder verschwinden, wenn sich der Inhalt ändert.) Drucker können dennoch überlaufenden Inhalt drucken.
auto-
Abhängig vom Benutzeragenten. Wenn der Inhalt in die Padding-Box passt, sieht er aus wie
visible, aber es wird trotzdem ein neuer Blockformatierungskontext erstellt.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | Block-containers, flex containers, and grid containers |
| Vererbt | Nein |
| Berechneter Wert | as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip |
| Animationstyp | diskret |
Formale Syntax
overflow-block =
visible |
hidden |
clip |
scroll |
auto
Beispiele
HTML
<ul>
<li>
<code>overflow-block: hidden</code> (hides the text outside the box)
<div id="hidden">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li>
<code>overflow-block: scroll</code> (always adds a scrollbar)
<div id="scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li>
<code>overflow-block: clip</code> (hides the text outside the box beyond the
overflow clip edge)
<div id="clip">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li>
<code>overflow-block: visible</code> (displays the text outside the box if
needed)
<div id="visible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li>
<code>overflow-block: auto</code> (on most browsers, equivalent to
<code>scroll</code>)
<div id="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
</ul>
CSS
div {
border: 1px solid black;
width: 250px;
height: 100px;
margin-bottom: 120px;
}
#hidden {
overflow-block: hidden;
}
#scroll {
overflow-block: scroll;
}
#clip {
overflow-block: clip;
}
#visible {
overflow-block: visible;
}
#auto {
overflow-block: auto;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Overflow Module Level 3 # overflow-control |