CSS 表示領域を超える場合の表示方法(overflow)

CSSの表示領域を超える場合の表示方法です。
overflowプロパティを使用します。

overflow プロパティ

overflow : 値
説明
visible 表示領域を超えた分は、はみ出して表示します。 (初期値)
hidden 表示領域を超えた分は、表示しません。
scroll 表示領域を超えた分は、スクロールで表示します。
auto ブラウザによって変わります。スクロールが一般的です。
値を継承する

コード

サンプルのコードです。
4行目はvisibleを指定しています。表示領域を超えた分は、はみ出して表示します。
8行目はhiddenを指定しています。表示領域を超えた分は、表示しません。
12行目はscrollを指定しています。表示領域を超えた分は、スクロールで表示します。
16行目はautoを指定しています。ブラウザによって変わります。

<style>
#box1{
	background-color:LightCyan;
	overflow:visible;
}
#box2{
	background-color:Cornsilk;
	overflow:hidden;
}
#box3{
	background-color:LightCyan;
	overflow:scroll;
}
#box4{
	background-color:Cornsilk;
	overflow:auto;
}
#d1 div{width:150px;height:70px;border:1px solid #000;margin-bottom:30px;}
</style>
<body >
<div id="d1">
<div id="box1">aaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああ</div>
<div id="box2">aaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああ</div>
<div id="box3">aaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああ</div>
<div id="box4">aaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああ</div>
</div>
</body>

サンプル

上記コードのサンプルです。
上からvisible、hidden、scroll、autoとしています。

aaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああ
aaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああ
aaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああ
aaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああ

関連の記事

CSS 文字の色を指定するサンプル(color)
CSS フォントを指定するサンプル(font-family)
CSS 文字を左寄せ/右寄せにするサンプル(text-align)
CSS 文字の垂直の位置を指定するサンプル(vertical-align)
CSS 行の高さを指定するサンプル(line-height)
CSS 文字の間隔を指定するサンプル(letter-spacing)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)
CSS 文字に線を引くサンプル(text-decoration)
CSS 単語の改行方法を指定するサンプル(word-break)




△上に戻る