CSS3

プロパティ

overflow-clip-margin

→●、mdn(en)、mdn

過フロー時の過表示部の幅。

このプロパティは、ボックスの 過フロー切り取り辺 を定義する ― すなわち、次を定義する：

各種 値は、次に従って定義される：

<visual-box> ●

＝content-box
| padding-box
| border-box

<length> に指定されたオフセットが 0 の場合の過フロー切り取り辺として、どのボックス辺を利用するかを指定する。

省略時の既定は、padding-box になるとする。

content-box

［内容ボックス／内容辺］を基準にする（SVG 文脈においては、fill-box として扱われる）。

<DIV style="border:1px solid red;
 width:100px; height:50px;
 overflow:clip;
 overflow-clip-margin:content-box;
 font-size:15px; line-height:1;
">abc defgh ijklmn opqrs tuvwxyz abc def ghi jkl mno pqr
</DIV>

¶

padding-box

［パディング ボックス／パディング辺］を基準にする（SVG 文脈においては、fill-box として扱われる）。

<DIV style="border:1px solid red;
 width:100px; height:50px;
 overflow:clip;
 overflow-clip-margin:padding-box;
 font-size:15px; line-height:1;
">abc defgh ijklmn opqrs tuvwxyz abc def ghi jkl mno pqr
</DIV>

¶

border-box

［ボーダー ボックス／ボーダー辺］を基準にする（SVG 文脈においては、stroke-box として扱われる）。

<DIV style="border:1px solid red;
 width:100px; height:50px;
 overflow:clip;
 overflow-clip-margin:border-box;
 font-size:15px; line-height:1;
">abc defgh ijklmn opqrs tuvwxyz abc def ghi jkl mno pqr
</DIV>

¶

<DIV style="border:1px solid red;
 width:100px; height:50px;
 overflow:clip;
 overflow-clip-margin:border-box 10px;
 font-size:15px; line-height:1;
">abc defgh ijklmn opqrs tuvwxyz abc def ghi jkl mno pqr
</DIV>

¶

<length[0,∞]> ○

指定されたオフセットは、過フロー切り取り辺は、指定されたボックス辺から どこまで拡がるかを規定する。

負な値は無効とする。

省略時の既定は、0 になるとする。

<DIV style="border:1px solid red;
 width:100px; height:50px;
 overflow:clip;
 overflow-clip-margin:20px;
 font-size:15px; line-height:1;
">abc defgh ijklmn opqrs tuvwxyz abc def ghi jkl mno pqr
</DIV>

過フロー切り取り辺は、隅において、［ box-shadow の拡幅距離に指定されたオフセットを与えたとき ］と正確に同じ仕方で形状付けられる。[CSS-BACKGROUNDS-3] § 隅の形状付け を見よ。

¶課題省く

注記： overflow 【の算出値】が［ hidden／scroll ］になるボックスに対しては、過フロー切り取り辺を利用するよう定義されないので、このプロパティによる効果は無い。

テスト