overflowプロパティ

値

次のような値を設定することができます。

• visible – 親要素内に表示が収まらない場合、外にはみ出しても表示を行います。初期値です。
• hidden – 親要素の範囲でのみ表示を行います。もし収まらない要素があった場合は途中で切れ取られます。
• scroll – 親要素の範囲で表示が収まらない場合、要素内をスクロールできるようにして、全てを閲覧できる状態にします。
• auto – 親要素内に表示が収まらない場合、ブラウザによって自動的に表示方法を選択するための値です。多くの場合は「scroll」と同じ挙動となりますが、ブラウザによって異なる可能性があります。

パターン1

値に「visible」を指定した例です。

CSSコード例

<style type="text/css">
.box1 {
	overflow: visible;
	width: 200px;
	height: 50px;
}
.box1 p {
	width: 250px;
	height: 100px;
}
</style>
<div class="box1">
	<p>This text is sample for overflow property.</p>
</div>

表示例：

パターン2

値に「hidden」を指定した例です。

CSSコード例

<style type="text/css">
.box2 {
	overflow: hidden;
	width: 200px;
	height: 50px;
}
.box2 p {
	width: 250px;
	height: 100px;
}
</style>
<div class="box2">
	<p>This text is sample for overflow property.</p>
</div>

表示例：

パターン3

値に「scroll」を指定した例です。なお、値に「auto」を指定した場合も多くのブラウザでは「scroll」と同じ表示になります。

CSSコード例

<style type="text/css">
.box3 {
	overflow: scroll;
	width: 200px;
	height: 50px;
}
.box3 p {
	width: 250px;
	height: 100px;
}
</style>
<div class="box3">
	<p>This text is sample for overflow property.</p>
</div>

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。