overflow-inline 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-inline CSS-Eigenschaft legt fest, was angezeigt wird, wenn der Inhalt die Inline-Anfangs- und Endkanten eines Kastens überläuft. Dies kann nichts, eine Scrollleiste oder der überlaufende Inhalt sein.
Hinweis:
Die overflow-inline-Eigenschaft wird, abhängig vom Schreibmodus des Dokuments, auf overflow-y oder overflow-x abgebildet.
Syntax
/* Keyword values */
overflow-inline: visible;
overflow-inline: hidden;
overflow-inline: clip;
overflow-inline: scroll;
overflow-inline: auto;
/* Global values */
overflow-inline: inherit;
overflow-inline: initial;
overflow-inline: revert;
overflow-inline: revert-layer;
overflow-inline: unset;
Werte
Diese Eigenschaft wird als eines der folgenden <overflow> Schlüsselwortwerte angegeben:
visible-
Der Inhalt wird nicht abgeschnitten und kann außerhalb der Inline-Anfangs- und Endkanten des Padding-Kastens dargestellt werden.
-
Der Inhalt wird bei Bedarf abgeschnitten, um in die Inline-Dimension des Padding-Kastens zu passen. Es werden keine Scrollleisten bereitgestellt.
clip-
Überlaufender Inhalt wird an der Überlaufabschnittskante des Elements abgeschnitten, die mit der
overflow-clip-margin-Eigenschaft definiert wird. scroll-
Der Inhalt wird bei Bedarf abgeschnitten, um innerhalb der Inline-Dimension des Padding-Kastens zu passen. Browser zeigen Scrollleisten an, unabhängig davon, ob tatsächlich Inhalt abgeschnitten wird oder nicht. (Dies verhindert, dass Scrollleisten erscheinen oder verschwinden, wenn sich der Inhalt ändert.) Drucker können überlaufenden Inhalt dennoch drucken.
auto-
Hängt vom Benutzeragenten ab. Wenn der Inhalt in den Padding-Kasten passt, sieht er genauso aus wie
visible, stellt jedoch immer noch einen neuen Block-Formatierungskontext her. Desktop-Browser stellen Scrollleisten bereit, wenn der Inhalt überläuft.
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-inline =
visible |
hidden |
clip |
scroll |
auto
Beispiele
Einstellung des Inline-Überlaufverhaltens
HTML
<ul>
<li>
<code>overflow-inline: hidden</code> (hides the text outside the box)
<div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: scroll</code> (always adds a scrollbar)
<div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: visible</code> (displays the text outside the box if
needed)
<div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: auto</code> (equivalent to <code>scroll</code>
in most browsers)
<div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: clip</code> (hides the text outside the box beyond
the overflow clip edge)
<code>clip</code>
<div id="div5">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
</ul>
CSS
div {
border: 1px solid black;
width: 250px;
margin-bottom: 12px;
}
#div1 {
overflow-inline: hidden;
}
#div2 {
overflow-inline: scroll;
}
#div3 {
overflow-inline: visible;
}
#div4 {
overflow-inline: auto;
}
#div5 {
overflow-inline: clip;
overflow-clip-margin: 2em;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Overflow Module Level 3 # overflow-control |