overflow-clip-margin CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Die overflow-clip-margin CSS-Eigenschaft bestimmt, wie weit außerhalb seiner Grenzen ein Element mit overflow: clip gezeichnet werden kann, bevor es abgeschnitten wird. Die durch diese Eigenschaft definierte Grenze wird als overflow clip edge des Kastens bezeichnet.
Syntax
css
/* <length> values */
overflow-clip-margin: 20px;
overflow-clip-margin: 1em;
/* <visual-box> | <length> */
overflow-clip-margin: content-box 5px;
/* Global values */
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: revert-layer;
overflow-clip-margin: unset;
Der <visual-box>-Wert, der standardmäßig padding-box ist, gibt den Kantenbereich an, der als Ursprung der overflow clip edge verwendet wird. Der in overflow-clip-margin angegebene <length>-Wert muss nicht negativ sein.
Hinweis:
Wenn das Element nicht overflow: clip hat, wird diese Eigenschaft ignoriert.
Formale Definition
| Anfangswert | 0px |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | the computed <length> and a <visual-box> keyword |
| Animationstyp | diskret |
Formale Syntax
overflow-clip-margin =
<visual-box> ||
<length>
<visual-box> =
content-box |
padding-box |
border-box
Beispiele
HTML
html
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
CSS
css
.box {
border: 3px solid black;
width: 250px;
height: 100px;
overflow: clip;
overflow-clip-margin: 20px;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Overflow Module Level 3 # overflow-clip-margin |
Browser-Kompatibilität
Siehe auch
- Verwandte CSS-Eigenschaften:
text-overflow,white-space,overflow,overflow-inline,overflow-x,overflow-y,clip,display