CSS3

プロパティ

overflow-x、overflow-y

→●、mdn（overflow-x、overflow-y）

過フロー時の取り扱い。

overflow-x プロパティは、横方向における過フロー（すなわち、ボックスの［左端／右端］側を過フローするとき）の取り扱いを指定する。

overflow-y プロパティは、縦方向における過フロー（すなわち、ボックスの［上端／下端］側を過フローするとき）の取り扱いを指定する。

visible

過フローに対する特別な取り扱いはない。すなわち、ボックスの内容は、ボックスの外側に位置されれば そこにも描画される。ボックスはスクロール コンテナにはならない。

<DIV style="border:1px solid red;
 overflow-x:visible;
 overflow-y:visible;
 width:100px; height:70px;
 font-size:16px; line-height:1;
">abcdefghijk<BR>lmn<BR>op<BR>qr<BR>st<BR>uvw<BR>xyz
</DIV>

hidden

次を指示する：

• ボックスの内容は、パディング ボックスで切り取られる。
• ユーザー エージェント は、［切り抜き領域の外側にある内容をビューするための、スクロール用ユーザー インタフェース］を供したり、［利用者が、タッチ スクリーン上をドラッグしたりマウスのスクロール用ホイールを用いて直にスクロールできる］ようにしないものとする。
• 内容は，依然としてプログラム的に ― 例えば [CSSOM-VIEW] にて定義される仕組みを利用して ― スクロールできるものとする。したがって、ボックスはスクロール コンテナになる。

<DIV style="border:1px solid red;
 overflow-x:hidden;
 overflow-y:hidden;
 width:100px; height:70px;
 font-size:16px; line-height:1;
">abcdefghijk<BR>lmn<BR>op<BR>qr<BR>st<BR>uvw<BR>xyz
</DIV>

clip

次を指示する：

• ボックスの内容は、過フロー切り取り辺で切り取られる。
• ユーザー エージェント は、［切り抜き領域の外側にある内容をビューするための、スクロール用ユーザー インタフェース］を供するべきでない。
• どのような仕組みでも、内容はスクロールできない。したがって、ボックスはスクロール コンテナにならない。

【この値は、CSS2 には無かったもの。】

hidden 違って、この値は、要素に新たな整形文脈を確立させることはない。

注記： ボックスに整形文脈も確立させたいと求める作者は、この値に加えて display を利用できる。

<DIV style="border:1px solid red;
 overflow-x:clip;
 overflow-y:clip;
 width:100px; height:70px;
 font-size:16px; line-height:1;
">abcdefghijk<BR>lmn<BR>op<BR>qr<BR>st<BR>uvw<BR>xyz
</DIV>

<DIV style="border:1px solid red;
 overflow-x:clip;
 overflow-y:clip;
 overflow-clip-margin:20px;
 width:100px; height:70px;
 font-size:16px; line-height:1;
">abcdefghijk<BR>lmn<BR>op<BR>qr<BR>st<BR>uvw<BR>xyz
</DIV>

scroll

次を指示する：

• ボックスの内容は、パディング ボックスで切り取られる。
• ボックスの内容をビューの中へスクロールできる。したがって、ボックスはスクロール コンテナになる。

加えて、ユーザー エージェント は、［利用者向けのスクロール法の仕組みを、スクリーン上に可視にする（スクロールバーやパン用のそれなど）］場合、その仕組みは ― 過フローの有無にかかわらず ― 表示されるべきである。これにより、動的環境において スクロール バーが現れたり消えたりする問題を避けれる。

目的の媒体が print であるときは、過フローしている内容は印刷されてもよい ― どこに印刷するかは定義されていない。

<DIV style="border:1px solid red;
 overflow-x:scroll;
 overflow-y:scroll;
 width:100px; height:70px;
 font-size:16px; line-height:1;
">abcdefghijk<BR>lmn<BR>op<BR>qr<BR>st<BR>uvw<BR>xyz
</DIV>

<DIV style="border:1px solid red;
 overflow-x:scroll;
 overflow-y:scroll;
 width:100px; height:70px;
 font-size:16px; line-height:1;
">abcde<BR>lmn<BR>op<BR>qr<BR>st<BR>uvw<BR>xyz
</DIV>

auto

ボックスにスクロール可能な過フローがあるときは、scroll の様にふるまい、他のときは hidden の様にふるまう。したがって、ユーザー エージェント が利用しているスクロール法の仕組みがスクリーン上で可視ならば（スクロール バーやパン用のそれなど）、その仕組みは過フローがある場合に限り、表示される。

<DIV style="border:1px solid red;
 overflow-x:auto;
 overflow-y:auto;
 width:100px; height:70px;
 font-size:16px; line-height:1;
">abcdef<BR>lmn<BR>op<BR>qr<BR>st<BR>uvw<BR>xyz
</DIV>

関連

overflow。white-space、word-break。

テスト

例