overflow-clip-margin
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die overflow-clip-margin
CSS Eigenschaft bestimmt, wie weit außerhalb seiner Grenzen ein Element mit overflow: clip
gezeichnet werden darf, bevor es abgeschnitten wird. Die durch diese Eigenschaft definierte Grenze wird als Overflow-Clip-Kante der Box bezeichnet.
Syntax
/* <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 die Boxkante an, die als Ursprung der Overflow-Clip-Kante verwendet wird. Der in overflow-clip-margin
angegebene <length>
-Wert muss nicht negativ sein.
Hinweis: Wenn das Element nicht overflow: clip
aufweist, wird diese Eigenschaft ignoriert.
Formale Definition
Initialer Wert | 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 [0,∞]>
<visual-box> =
content-box |
padding-box |
border-box
Beispiele
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
.box {
border: 3px solid black;
width: 250px;
height: 100px;
overflow: clip;
overflow-clip-margin: 20px;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Overflow Module Level 3 # overflow-clip-margin |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Verwandte CSS-Eigenschaften:
text-overflow
,white-space
,overflow
,overflow-inline
,overflow-x
,overflow-y
,clip
,display