DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft overflow-clip-margin bestimmt, wie weit der Überlauf eines Elements über die Box des Elements hinausgehen kann, bevor er abgeschnitten wird. Dieser Bereich wird als overflow clip edge bezeichnet.
.element {
height: 100px;
overflow: clip; /* required */
overflow-clip-margin: 20px;
}
overflow: clip; schneidet den Inhalt des Elements ab, während overflow-clip-margin festlegt, wie weit der Inhalt über den Ausschnitt hinaus angezeigt werden darf.Syntax
overflow-clip-margin: <visual-box> || <length [0,∞]><visual-box>: Wenn der angegebene Offset null ist, gibt die visuelle Box die Kante der Box an, die als Ursprung des Ausschnitts für den Überlauf verwendet wird. Wenn sie weggelassen wird, wird standardmäßig die padding-box des Elements verwendet.<length [0,∞]>: Der Offset gibt an, wie weit der Ausschnitt für den Überlauf von der gewählten Kante der Box aus erweitert wird. Wenn er weggelassen wird, wird der Wert auf null gesetzt. Negative Werte sind ungültig.
- Initial:
0px - Gilt für: alle Elemente
- Vererbt: nein
- Berechneter Wert: der berechnete
- Animationstyp: diskret
Werte
/* <length> values */
overflow-clip-margin: 20px;
overflow-clip-margin: 1rem;
overflow-clip-margin: 2.4em;
overflow-clip-margin: 3ch;
/* <visual-box> value */
overflow-clip-margin: content-box;
overflow-clip-margin: padding-box;
overflow-clip-margin: border-box;
/* Global values */
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: unset;overflow: clip ist erforderlich
Wir müssen über die Eigenschaft overflow: clip sprechen, da sie erforderlich ist, damit overflow-clip-margin seine Funktion erfüllt. Kurz gesagt, overflow-clip teilt dem Browser mit, dass Inhalte, die über die Grenzen des Elements hinausgehen, ausgeblendet werden sollen – ähnlich wie bei der Deklaration
. Wobei das clip-Schlüsselwort anders ist, da es jegliches Scrollen verbietet, sei es durch den Benutzer oder programmatisch. Es ist auch erwähnenswert, dass die Box selbst kein Scroll-Container wird und keinen neuen Formatierungskontext startet. Mit anderen Worten, keine automatischen Scrollbalken oder ähnliches, wenn der Überlauf abgeschnitten wird.
Wir können eine einzelne Achse abschneiden
overflow: clip setzt den Ausschnitt für die x-Achse (links-rechts-Richtung) und die y-Achse (oben-unten-Richtung). Aber wir können diese isolieren und bei Bedarf in einer einzigen Richtung abschneiden, indem wir overflow-x: clip und overflow-y: clip verwenden.
.element {
overflow-x: clip; /* clip along the x-axis only */
overflow-clip-margin: 20px;
}Demo
Dies funktioniert mit allen Inhaltsformen, einschließlich Bildern.
Browser-Unterstützung
Zum Zeitpunkt der Erstellung dieses Artikels nur Chrome.
