Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
overflow-block
Baseline 2025 *Newly available
Since September 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
Dieoverflow-blockCSS Eigenschaft legt fest, was angezeigt wird, wenn Inhalt die Blockanfangs- und Blockendkanten eines Rahmens überläuft. Dies kann nichts, eine Scrollleiste oder der Überlaufinhalt sein.
Hinweis:Dieoverflow-block Eigenschaft wird aufoverflow-y oderoverflow-x abgebildet, abhängig vom Schreibmodus des Dokuments.
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;Dieoverflow-block Eigenschaft wird als einfaches<overflow> Schlüsselwort angegeben:
Werte
visibleInhalt wird nicht abgeschnitten und kann außerhalb der Blockanfangs- und Blockendkanten des Innenabstands gerendert werden.
hiddenInhalt wird, falls erforderlich, abgeschnitten, um in die Blockdimension des Innenabstands zu passen. Es werden keine Scrollleisten bereitgestellt.
clipÜberlaufender Inhalt wird an der Überlaufrandkante des Elements abgeschnitten, die mithilfe der
overflow-clip-marginEigenschaft definiert wird.scrollInhalt wird, falls erforderlich, abgeschnitten, um in die Blockdimension des Innenabstands 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 weiterhin überlaufenden Inhalt drucken.
autoHängt vom Benutzeragenten ab. Wenn der Inhalt in den Innenabstand passt, sieht es aus wie
visible, aber es wird dennoch ein neuer Block-Formatierungskontext erstellt.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | Block-containers, flex containers, and grid containers |
| Vererbt | Nein |
| Berechneter Wert | as specified, except withvisible/clip computing toauto/hidden respectively if one ofoverflow-x oroverflow-y is neithervisible 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> 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> 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> 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> 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> 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
| Specification |
|---|
| CSS Overflow Module Level 3 # overflow-control |
Browser-Kompatibilität
Loading…