overflow-inline
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.
Die overflow-inline CSS Eigenschaft legt fest, was angezeigt wird, wenn der Inhalt die Inline-Start- und Endränder eines Rahmens überläuft. Dies kann nichts, eine Bildlaufleiste 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;
Die overflow-inline Eigenschaft wird als einzelnes <overflow> Schlüsselwortwert angegeben.
Werte
visible-
Der Inhalt wird nicht abgeschnitten und kann außerhalb der Inline-Start- und Endränder der Padding-Box dargestellt werden.
-
Der Inhalt wird, falls nötig, abgeschnitten, um in die Inline-Dimension der Padding-Box zu passen. Es werden keine Bildlaufleisten bereitgestellt.
clip-
Überlaufender Inhalt wird an der Überlauf-Clip-Kante des Elements abgeschnitten, die durch die
overflow-clip-marginEigenschaft definiert ist. scroll-
Der Inhalt wird bei Bedarf abgeschnitten, um in der Inline-Dimension in die Padding-Box zu passen. Browser zeigen Bildlaufleisten an, unabhängig davon, ob tatsächlich Inhalt abgeschnitten wird oder nicht. (Dies verhindert, dass Bildlaufleisten erscheinen oder verschwinden, wenn sich der Inhalt ändert.) Drucker können trotzdem überlaufenden Inhalt drucken.
auto-
Hängt vom Benutzeragenten ab. Wenn der Inhalt in die Padding-Box passt, sieht es genauso aus wie
visible, es wird jedoch trotzdem ein neuer Block-Formatierungskontext erstellt. Desktop-Browser bieten Bildlaufleisten, 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
Verhalten bei Inline-Überlauf einstellen
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
| Specification |
|---|
| CSS Overflow Module Level 3 # overflow-control |
Browser-Kompatibilität
Loading…