Limited availability
Die overflow-inline
CSS Eigenschaft legt fest, was angezeigt wird, wenn Inhalt über die Inline-Anfangs- und Endränder eines Kastens hinausgeht. Dies kann nichts, ein Scrollbalken oder der überschüssige Inhalt sein.
Hinweis: Die overflow-inline
-Eigenschaft wird abhängig vom Schreibmodus des Dokuments auf overflow-y
oder overflow-x
abgebildet.
/* 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 ein einzelner <overflow>
Schlüsselwortwert angegeben.
visible
Der Inhalt wird nicht abgeschnitten und kann auÃerhalb der Inline-Anfangs- und Endränder des Padding-Boxs gerendert werden.
hidden
Der Inhalt wird bei Bedarf abgeschnitten, um in die Inline-Dimension der Padding-Box zu passen. Es werden keine Scrollbalken bereitgestellt.
clip
ÃberflieÃender Inhalt wird an der Ãberlauf-Abschneidekante des Elements abgeschnitten, die mit der overflow-clip-margin
-Eigenschaft definiert wird.
scroll
Der Inhalt wird bei Bedarf abgeschnitten, um in die Inline-Dimension der Padding-Box zu passen. Browser zeigen Scrollbalken an, unabhängig davon, ob tatsächlich Inhalt abgeschnitten wird oder nicht. (Dies verhindert, dass Scrollbalken erscheinen oder verschwinden, wenn sich der Inhalt ändert.) Drucker können dennoch überflieÃenden Inhalt drucken.
auto
Hängt vom Benutzeragenten ab. Wenn der Inhalt in die Padding-Box passt, sieht es aus wie visible
, stellt aber dennoch einen neuen Block-Formatierungskontext her. Desktop-Browser bieten Scrollbalken, wenn Inhalt überläuft.
overflow-inline =Beispiele Inline-Ãberlaufverhalten festlegen HTML
visible |
hidden |
clip |
scroll |
auto
<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 Browser-Kompatibilität Siehe auch
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4