overflow-clip-box-block

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

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

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

Valeur introuvable dans la base de données

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

La syntaxe n'a pas été trouvée !

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-block: 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

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 CSS Overflow Module Level 3 si c'est le cas.

Compatibilité des navigateurs

[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

• text-overflow,
• white-space,
• overflow,
• overflow-x,
• overflow-y,
• clip,
• display