Overflow-clip-margin - Propriété CSS

Syntaxe de overflow-clip-margin (schéma).

Description des termes utilisés sur le schéma (les termes en gras sont prédéfinis) :

• length est une valeur numérique positive ou nulle, suivie d'une des unités de dimension.

Description de la propriété overflow-clip-margin.

overflow-clip-margin définit les marges de débordement. Autrement dit, de quelle distance le contenu peut déborder de l'élément. Cela suppose que le contenu soit trop grand pour être visible en entier dans l'espace qui lui est réservé, et que la propriété overflow soit positionnée sur la valeur clip.

Voir aussi la propriété overflow.

Valeurs pour overflow-clip-margin.

• overflow-clip-margin: 0px;

  La valeur initiale de la propriété est 0. Le contenu qui déborde est masqué mais il peut cependant s'étendre sur la marge intérieure du bas (c'est le comportement par défaut des navigateurs). Sur l'exemple, la partie bleue représente la zone qui accepte du contenu (content-box), cette zone exclue les marges intérieures et la bordure.

  Ce texte est trop grand pour l'élément. Il va être tronqué mais peut cependant déborder sur la marge intérieure du bas.
  overflow-clip-margin:0px;
• overflow-clip-margin: 20px;

  Une valeur numérique, positive ou nulle; suivie d'une unités de dimension. Les pourcentages ne sont pas acceptés. Cette valeur indique la marges de débordement, comptée par rapport à padding-box.

  Ce texte est trop grand pour l'élément. Il va être tronqué mais peut cependant déborder de 20 pixels la surface de border-box.
  
  overflow-clip-margin:20px;
• overflow-clip-margin: content-box 10px; overflow-clip-margin: padding-box 10px; overflow-clip-margin: border-box 10px;

  Les marges de débordement sont comptées par rapport à content-box, padding-box ou border-box. Si aucune valeur numérique n'est indiquée, le débordement s'arrête a la surface indiquée.
  Par défaut c'est padding-box qui sert de référence. Autrement dit, lorsque overflow-clip-margin est laissée à sa valeur initiale, le contenu peut empiéter sur les marges intérieures.

  Exemple ci-dessous : on a fixé une marge intérieure assez grande (20 pixels) à ces deux éléments. La zone content-box est matérialisée par la couleur bleue ciel. Le premier élément déborde par le droite (retours à la ligne interdits) et le deuxième déborde par le bas. Dans les deux cas, on voit que le contenu empiète sur la bordure.

  Cet exemple ne fonctionne pas sur Firefox  .

   Ce contenu déborde par la droite à cause d'une restriction sur les retours à la ligne

  overflow-clip-margin:border-box;

  Ce contenu déborde par le bas, et jusqu'à empiéter sur la bordure.

  overflow-clip-margin:border-box;
• overflow-clip-margin: initial; (0) overflow-clip-margin: inherit; overflow-clip-margin: revert; overflow-clip-margin: revertLayer; overflow-clip-margin: unset;

  Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Possibilité d'animation de la propriété overflow-clip-margin.

Juste un petit exemple d'animation de la propriété overflow-clip-margin : une image qui se dévoile progressivement. il y aurait d'autres moyens d'obtenir ce résultat.

Sur les navigateurs -webkit- (Chrome  , Opera  , Edge  ...) l'animation passe brutalement d'une valeur à l'autre, tandis que sur Firefox   la transition est progressive.

La propriété overflow-clip-margin et Javascript.

Avec Javascript, modifier la valeur de overflow-clip-margin.

En Javascript, voici deux exemples de code pour modifier la valeur de overflow-clip-margin. On voit que Javascript propose une syntaxe avec la notation typique de CSS : un tiret pour séparer les mots (kebab-case), et une autre syntaxe avec une majuscule pour séparer les mots (camel-case).

let el = document.getElementById('id'); el.style['overflow-clip-margin'] = '1ex'; // ou let el = document.getElementById('id'); el.style.overflowClipMargin = '1ex';

Avec Javascript, lire la valeur de overflow-clip-margin.

La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style : ce code ne fonctionne pas pour les valeurs affectées via un sélecteur CSS. La valeur est renvoyée telle qu'elle a été définie, en particulier, avec la même unité.

let el = document.getElementById('id'); let value = el.style['overflow-clip-margin']; // ou let el = document.getElementById('id'); let value = el.style.overflowClipMargin;

Avec Javascript, lire la valeur calculée de overflow-clip-margin.

La valeur calculée est celle qui a été affectée à l'élément via son attribut style, ou via un sélecteur CSS, à défaut, une valeur héritée éventuelle, ou sinon la valeur initiale de la propriété : 0 pour overflow-clip-margin.

Si une valeur a été définie en valeur numérique avec une unité quelconque, elle sera convertie en pixels.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('overflow-clip-margin');

Avec JQuery, modifier la valeur de overflow-clip-margin.


$('#id').css('overflow-clip-margin', '1ex');
// ou
$('#id').css('overflowClipMargin', '1ex');


Avec JQuery, lire la valeur calculée de overflow-clip-margin.

let value = $('#id').css('overflow-clip-margin');

Autres exemples de code.

La page Javascript et CSS donne d'autres exemples de code Javascript et JQuery permettant de manipuler les styles.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété overflow-clip-margin et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment sont mémorisées (sérialisées) les valeurs de overflow-clip-margin. On constate en particulier que toutes les unités de dimension sont converties en pixels.

Simulateur avec la propriété overflow-clip-margin.

Effet de overflow-clip-margin sur un élément contenant du texte.

Afin de bien illustrer l'effet de la propriété overflow-clip-margin, l'élément ci-dessous a été doté d'une marge intérieure (padding) de 20 pixels, et d'une bordure grise, également de 20 pixels. Bien entendu sa propriété overflow a été fixée à clip.

Effet de overflow-clip-margin sur un élément contenant une image.

L'image a une opacité de 0,5, afin que l'on puisse deviner par transparence le bloc qui la contient. Et d'autre part, ce dernier a des angles arrondis. Sur Firefox   l'arrondi se retrouve dans la découpe de l'image, mais pas sur les navigateurs -webkit-.

Support de overflow-clip-margin.

La propriété overflow-clip-margin, bien que normalisée, n'est pas encore très bien reconnue par tous les navigateurs (2025).

Remarques :

(1) Ne fonctionne que lorsque les deux axes utilisent overflow:clip.

(2) Supporte seulement une valeur pour la propriété overflow-clip-margin, pas une boîte.

1

Propriété
overflow-clip-margin

Estimation de la prise en charge globale.

84%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

1

Opéra

1

Firefox pour Androïd

2

Samsung Internet

2

Chrome

2

Edge

2

Firefox

2

Androïd Brower

2

Chrome pour Androïd

2

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Évolution de la propriété overflow-clip-margin.

• Module CSS - Débordements - Niveau 3

  Concernant overflow-clip-margin. Première présentation de la propriété overflow-clip-margin.
  

  18 Avril 2013

  Document de travail.

  

  

  

• Module CSS - Débordements - Niveau 4

  Concernant overflow-clip-margin. Pas de changement notable sur le propriété overflow-clip-margin.
  

  13 Juin 2017

  Document de travail.

  

  

  

Voir aussi, concernant la gestion des débordements.

Le module de spécification module CSS - Débordements regroupe toutes les définitions concernant les débordements de contenu. La propriété overflow-clip-margin, ainsi que les suivantes, sont décrites dans ce module.

Sélecteurs :

Propriétés :