The overflow-clip-box-block
CSS property specifies relative to which box the clipping happens when there is an overflow — in the block direction.
/* Keyword values */ overflow-clip-box-block: padding-box; overflow-clip-box-block: content-box; /* Global values */ overflow-clip-box-block: inherited; overflow-clip-box-block: initial; overflow-clip-box-block: unset;
Note: On Gecko, by default, padding-box
is used everywhere, but <input type="text">
and similar use the value content-box
. Note that this property is activated by default only in the UA stylesheet and chrome contexts.
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-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);
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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
overflow-clip-box-block | Chrome No support No | Edge No support No | Firefox Full support 59 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Edge Mobile No support No | Firefox Android Full support 59 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
See also
- Related CSS properties:
text-overflow
,white-space
,overflow
,overflow-x
,overflow-y
,clip
,display