overflow-inline
Die overflow-inline
CSS Eigenschaft legt fest, was angezeigt wird, wenn Inhalt die Inline-Start- und -Endkanten eines Rahmens überläuft. Dies kann nichts sein, eine Scroll-Leiste oder der überlaufende Inhalt.
Hinweis: Die Eigenschaft overflow-inline
wird je nach 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 Eigenschaft overflow-inline
wird als einzelnes <overflow>
Schlüsselwortwert angegeben.
Werte
visible
-
Inhalt wird nicht abgeschnitten und kann außerhalb der Inline-Start- und -Endkanten des Innenabstands-Box gerendert werden.
-
Inhalt wird bei Bedarf abgeschnitten, um in die Inline-Dimension der Innenabstands-Box zu passen. Es werden keine Scrollleisten bereitgestellt.
clip
-
Überlaufender Inhalt wird an der Überlauf-Clipping-Kante des Elements abgeschnitten, die mit der Eigenschaft
overflow-clip-margin
definiert ist. scroll
-
Inhalt wird bei Bedarf abgeschnitten, um in die Inline-Dimension der Innenabstands-Box zu passen. Browser zeigen Scrollleisten an, unabhängig davon, ob Inhalt tatsächlich abgeschnitten wird. (Dies verhindert, dass Scrollleisten erscheinen oder verschwinden, wenn sich der Inhalt ändert.) Drucker können dennoch überlaufenden Inhalt drucken.
auto
-
Hängt vom Benutzeragenten ab. Wenn Inhalt in die Innenabstands-Box passt, sieht es aus wie
visible
, schafft aber dennoch einen neuen Block-Formatierungskontext. Desktop-Browser stellen Scrollleisten bereit, wenn Inhalt überläuft.
Formale Definition
Initialer Wert | 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
Beispiele
Inline-Überlaufverhalten 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
BCD tables only load in the browser