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 Inhalt die gelegten Start- und Endränder einer Box im Inline-Bereich überläuft. Dies kann nichts sein, eine Scrollleiste oder der überlaufende Inhalt.
Hinweis:
Die overflow-inline-Eigenschaft verweist auf overflow-y oder overflow-x, abhängig vom Schreibmodus des Dokuments.
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;
Die overflow-inline-Eigenschaft wird als einzelnes <overflow> Schlüsselwort-Wert angegeben.
Werte
visible-
Der Inhalt wird nicht abgeschnitten und kann außerhalb der Start- und Endkanten des inneren Rahmens im Inline-Bereich gerendert werden.
-
Der Inhalt wird, falls erforderlich, abgeschnitten, um in die Inline-Dimension des inneren Rahmens zu passen. Es werden keine Scrollbars bereitgestellt.
clip-
Überlaufender Inhalt wird an der Überlauf-Clipping-Kante des Elements abgeschnitten, die mit der
overflow-clip-marginEigenschaft definiert wird. scroll-
Der Inhalt wird, falls erforderlich, abgeschnitten, um in die Inline-Dimension des inneren Rahmens zu passen. Browser zeigen Scrollbars an, unabhängig davon, ob tatsächlich Inhalt abgeschnitten ist. (Dies verhindert, dass Scrollbars erscheinen oder verschwinden, wenn sich der Inhalt ändert.) Drucker können weiterhin überlaufenden Inhalt drucken.
auto-
Hängt vom Benutzeragenten ab. Wenn der Inhalt in das innere Feld passt, sieht es aus wie
visible, stellt jedoch dennoch einen neuen Block-Formatierungskontext her. Desktop-Browser bieten Scrollbars, 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
Festlegen des Überlaufverhaltens im Inline-Bereich
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 |