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

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 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 Wert0px
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertthe computed <length> and a <visual-box> keyword
Animationstypdiskret

Formale Syntax

overflow-clip-margin = 
  <visual-box>    ||
  <length [0,∞]>  

<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

Specification
CSS Overflow Module Level 3
# overflow-clip-margin

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch