overflow

解説

ボックスの範囲内に内容が入りきらない場合、はみ出した部分の表示方法を指定します。

visible	ボックスからはみ出して表示（初期値）ただし、IEでは、ボックスが内容に合わせて拡張される
scroll	入りきらない内容はスクロールして見られるようになる
hidden	はみ出た部分は表示されない
auto	ブラウザに依存（一般的には scroll と同じ）

プロパティ情報

値：	`visivle`,`scroll`,`hidden`,`auto`のいずれか
初期値：	visivle
適用対象：	ブロック要素と置換要素
継承：	しない
パーセンテージ：	不可
適用メディア：	視覚
レベル：	2

参照

top bottom left right overflow overflow-x overflow-y position display float clear z-index visibility clip direction unicode-bidi writing-mode

使用例

ソース

CSSの記述方法はスタイルシートってなに？も参照下さい。

p.sample1 {width:30px; height:30px; background-color:ffff00; overflow: visible;}
p.sample2 {width:30px; height:30px; background-color:ffff00; overflow: scroll;}
p.sample3 {width:30px; height:30px; background-color:ffff00; overflow: hidden;}
p.sample4 {width:30px; height:30px; background-color:ffff00; overflow: auto;}

HTMLの記述方法

<p class="sample1">https://www.7key.jp/</p>
<p class="sample2">https://www.7key.jp/</p>
<p class="sample3">https://www.7key.jp/</p>
<p class="sample4">https://www.7key.jp/</p>

表示結果

https://www.7key.jp/