overflow-clip-box-inline

The overflow-clip-box-inline CSS property specifies relative to which box the clipping happens when there is an overflow — in the inline direction.

/* Keyword values */
overflow-clip-box-inline: padding-box;
overflow-clip-box-inline: content-box;

/* Global values */
overflow-clip-box-inline: inherited;
overflow-clip-box-inline: initial;
overflow-clip-box-inline: unset;

Value not found in DB!

Syntax

Values

padding-box

This keyword makes the clipping be related to the padding box.

content-box

This keyword makes the clipping be related to the content box.

Formal syntax

Syntax not found in DB!

Examples

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);

Result

Specifications

This property has been proposed to the W3C CSSWG; it is not yet on the standard track but, if accepted, should appear in CSS Overflow Module Level 3.

Browser compatibility

See also

• Related CSS properties: text-overflow, white-space, overflow, overflow-x, overflow-y, clip, display