Overflow-clip-margin - Propriété CSS

overflow-clip-margin

Résumé des caractéristiques de la propriété `overflow-clip-margin`

Description rapide

Définit la marge de débordement, lorsque le contenu est plus grand que l'élément.

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

padding-box | content-box | border-box

Pourcentages

Ne s'appliquent pas.

Valeur initiale

0

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété overflow-clip-margin passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Débordements

Références (W3C)

🡇

🡅

CSS Overflow Module Level 4

Statut du document: WD (document de travail)

CSS Overflow Module Level 3

Statut du document: WD (document de travail)

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

Schéma syntaxique de la fonction overflow-clip-margin
Détails sur les valeurs.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

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.

overflow-clip-margin est une propriété résumée pour :

overflow-clip-margin-top : débordement par le haut.
overflow-clip-margin-right : débordement par la droite.
overflow-clip-margin-botom : débordement par le bas.
overflow-clip-margin-left : débordement par la gauche.

Et overflow-clip-margin-inline et overflow-clip-margin-block pour :

overflow-clip-margin-block-start : débordement par le début du bloc.
overflow-clip-margin-inline-start : débordement par le début de ligne.
overflow-clip-margin-block-end : débordement par la fin du du bloc.
overflow-clip-margin-inline-end : débordement par le début des lignes.

Valeurs pour `overflow-clip-margin`.

overflow-clip-margin: 20px;

Les marges de débordement sont fixées à 20px. La valeur indiquée doit être positive ou nulle, et suivie d'une unité de dimension. Les pourcentages ne sont pas acceptés.
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. Le premier 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 marge intérieure (padding).

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

Ce contenu est trop grand pour l'élément. Les retours à la ligne étant autorisés, il déborde par le bas et empiète sur la marge intérieure du bas
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.

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, 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 discrète bordure, également de 20 pixels. Bien entendu sa propriété overflow a été fixée à clip.

La marge de débordement indique de quelle distance le contenu (ici du texte) peut déborder en dehors de l'espace qui lui est réservé.

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.

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 (2023).

Colonne 1

Support par les navigateurs de la propriété overflow-clip-margin, qui définit les marges de débordement (lorsque overflow vaut hidden).

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.

Propriété
overflow-clip-margin

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

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

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

18 Avril 2013
Document de travail.
Module CSS - Débordements - Niveau 4

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 CSS Overflow Module 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.

Propriétés :

⚠

block-ellipsis

Gère l'affichage d'une marque de suite à la fin d'un élément lorsque le contenu déborde de ce dernier.

overflow

Gestion des débordements, lorsque le contenu est trop grand pour les dimensions imposées à l'élément.

overflow-block

Gestion des débordements dans la direction secondaire.

overflow-inline

Gestion des débordements dans la direction principale.

overflow-x

Gestion du débordement dans le sens horizontal.

overflow-y

Gestion du débordement dans le sens vertical.

scroll-behavior

Choisit entre un défilement brutal ou progressif de la page.

scrollbar-gutter

Réserve ou non la gouttière pour une barre de défilement.

text-overflow

Définit l'indicateur de débordement du texte.