overflow（オーバーフロー）

解説

ボックス要素の幅、高さを制限されている場合に、エレメント（要素）の内容量がオーバーフロー（あふれる）することがあります。この時の表示方法を指定する属性です。

値	visible：制限（幅、高さ）を無視して全て表示 hidden：制限（幅、高さ）に従いオーバーフロー分は非表示 scroll：制限（幅、高さ）に従いスクロールバーを付けて表示 auto：自動的に指定
初期値	visible
%値の基準
適用	と互換エレメント
継承	しない

対応状況

全ての値

は、hiddenのみ動作するようです。

使用例

ソース

スタイル部に、

div{background:aqua;width:200px;height:35px;}
.visible{overflow:visible;}
.hidden{overflow:hidden;}
.scroll{overflow:scroll;}
.auto{overflow:auto;}

と記述し、

body部に、

<div class="visible">制限（幅、高さ）を無視して全て表示されます。制限（幅、高さ）を無視して全て表示されます。</div><br>
<div class="hidden">制限（幅、高さ）に従いオーバーフロー分は非表示になります。制限（幅、高さ）に従いオーバーフロー分は非表示になります。</div><br>
<div class="scroll">制限（幅、高さ）に従いスクロールバーを付けて表示されます。制限（幅、高さ）に従いスクロールバーを付けて表示されます。</div><br>
<div class="auto">ブラウザが自動的に指定します。ブラウザ依存です。ブラウザが自動的に指定します。ブラウザ依存です。</div>

と記述すると。

表示＆操作

制限（幅、高さ）を無視して全て表示されます。制限（幅、高さ）を無視して全て表示されます。

制限（幅、高さ）に従いスクロールバーを付けて表示されます。制限（幅、高さ）に従いスクロールバーを付けて表示されます。

ブラウザが自動的に指定します。ブラウザ依存です。ブラウザが自動的に指定します。ブラウザ依存です。

　
と表示されます。

pokochan@mx1.tees.ne.jp