overflow-clip-box

Kein Standard
Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zugänglich sind, benutzt werden: Sie wird nicht für alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilitäten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften könnten in der Zukunft verändert werden.

Übersicht

Die overflow-clip-box CSS Eigenschaft bestimmt, bezogen auf welche Box die Zuschnitt erfolgt, wenn ein Überlauf stattfindet.

In Gecko wird standardmäßig padding-box überall verwendet, aber <input type="text"> und ähnliche Elemente verwenden den Wert content-box. Vor Firefox 29 war das Verhalten fest kodiert; seitdem benutzt Firefox diese Eigenschaft, die auch an anderen Stellen verwendet werden kann. Beachte, dass diese Eigenschaft nur in User Agent Stylesheets und dem Chrome Kontext standardmäßig aktiviert ist.

Initialwert	`padding-box`
Anwendbar auf	alle Elemente
Vererbt	Nein
Medien	visuell
Berechneter Wert	wie angegeben
Animierbar	Nein
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwerte */
overflow-clip-box: padding-box;
overflow-clip-box: content-box;

/* Globale Werte */
overflow-clip-box: inherited;
overflow-clip-box: initial;
overflow-clip-box: unset;

Werte

padding-box: Diese Schlüsselwort gibt an, dass der Zuschnitt relativ zur Paddingbox erfolgt.
content-box: Diese Schlüsselwort gibt an, dass der Zuschnitt relativ zur Contentbox erfolgt.

Formale Syntax

padding-box | content-box

Beispiele

padding-box

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

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

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

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

Spezifikationen

Diese Eigenschaft wurde der W3C CSSWG vorgeschlagen; sie ist noch nicht standardisiert, aber, falls sie akzeptiert wird, sollte sie in CSS Overflow Module Level 3 erscheinen.

Merkmal	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari (WebKit)
Grundlegende Unterstützung	29.0 (29.0)^[1]	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt

Merkmal	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Grundlegende Unterstützung	29.0 (29.0)^[1]	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt

[1] Diese Eigenschaft wird durch die layout.css.overflow-clip-box.enabled Einstellung gesteuert, welche standardmäßig false ist. Sie ist nur in User Agent Stylesheets und dem Chrome Kontext aktiviert. Siehe Bug 966992.

Siehe auch

Ähnliche CSS Eigenschaften: text-overflow, white-space, overflow, overflow-x, overflow-y, clip, display