--- title: overflow-clip-box-inline slug: Web/CSS/overflow-clip-box-inline tags: - CSS - Non-standard - Propriété - Reference translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box-inline ---
{{CSSRef}}{{Non-standard_header}}

La propriété CSS overflow-clip-box-inline définit par rapport à quelle boîte est appliqué le rognement lorsque le contenu dépasse dans la direction en ligne (la direction correspondant au sens d'écriture).

/* Valeurs avec un mot-clé */
overflow-clip-box-inline: padding-box;
overflow-clip-box-inline: content-box;

/* Valeurs globales */
overflow-clip-box-inline: inherited;
overflow-clip-box-inline: initial;
overflow-clip-box-inline: unset;

Note : Sur Gecko, padding-box est, par défaut utilisé partout sauf pour <input type="text"> et les éléments semblables qui utilisent content-box. Par défaut, cette propriété est uniquement activée pour les feuilles de style de l'agent utilisateur et le contexte du chrome.

{{cssinfo}}

Syntaxe

Valeurs

padding-box
Avec ce mot-clé, le rognage est relatif à la boîte de remplissage (padding).
content-box
Avec ce mot-clé, le rognage est relatif à la boîte de contenu.

Syntaxe formelle

{{csssyntax}}

Exemples

padding-box

HTML

<div class="things">
  <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box">
  <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div>
</div>

CSS

.scroll {
  overflow: auto;
  padding: 0 30px;
  width: 6em;
  border: 1px solid black;
  background: lime content-box;
}

.padding-box {
  overflow-clip-box-inline: padding-box;
}

JavaScript

function scrollSomeElements() {
  var elms = document.querySelectorAll('.scroll');
  for (i=0; i < elms.length; ++i) {
    elms[i].scrollLeft=80;
  }
}
var elt = document.queryElementsByTagName('body')[0];

elt.addEventListener("load", scrollSomeElements, false);

Résultat

{{EmbedLiveSample('padding-box')}}

Spécifications

Cette propriété a été proposée au groupe de travail CSSWG du W3C. Elle n'est pas encore en voie de standardisation mais devrait apparaître dans {{SpecName("CSS3 Overflow")}} si c'est le cas.

Compatibilité des navigateurs

{{CompatibilityTable}}

Fonctionnalité Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
Support simple {{CompatGeckoDesktop(59)}}[1] {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Fonctionnalité Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Support simple {{CompatGeckoMobile(59)}}[1] {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

[1] Cette propriété est contrôlée par la préférence layout.css.overflow-clip-box.enabled dont la valeur par défaut est false. Elle est uniquement activée pour les feuilles de style de l'agent utilisateur ou le contexte du chrome. Voir {{bug(966992)}}.

Voir aussi