overflow-clip-margin
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
La propriété CSS overflow-clip-margin détermine jusqu'où un élément avec overflow: clip peut être peint en dehors de ses limites avant d'être rogné. La limite définie par cette propriété est appelée bord de découpe du débordement de la boîte.
Syntaxe
css
/* Valeurs de type <length> */
overflow-clip-margin: 20px;
overflow-clip-margin: 1em;
/* Valeurs de type <visual-box> | <length> */
overflow-clip-margin: content-box 5px;
/* Valeurs globales */
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: revert-layer;
overflow-clip-margin: unset;
La valeur <visual-box>, qui par défaut est padding-box, définit le bord de la boîte à utiliser comme origine du bord de découpe du débordement. La valeur <length> définie dans overflow-clip-margin doit être non négative.
Note :
Si l'élément n'a pas overflow: clip, cette propriété sera ignorée.
Définition formelle
| Valeur initiale | 0px |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | la longueur (<length>) calculée et un mot-clé de type <visual-box> |
| Type d'animation | discrète |
Syntaxe formelle
overflow-clip-margin =
<visual-box> ||
<length [0,∞]>
<visual-box> =
content-box |
padding-box |
border-box
Exemples
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;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Overflow Module Level 3 # overflow-clip-margin |
Compatibilité des navigateurs
Voir aussi
- Propriétés CSS associées :
text-overflow,white-space,overflow,overflow-inline,overflow-x,overflow-y,clip,display