はみ出る部分の処理方法を指定する

overflow: 表示形式

[表示形式]
visible ボックスからはみ出して表示
hidden はみ出した部分を表示しない
scroll スクロールして見られるようにする
auto 必要に応じてスクロールできるようにする

overflow プロパティは、内容がボックスに入りきらない場合に、
その部分をどの様に表示するか指定します。
このプロパティは、ブロックレベル要素と置換要素（imgやinput, textarea, select など）
に対して指定することが出来ます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>CSS覚書</title>
<style type="text/css">
<!--
body {
color: #ff6600;
background: #ffffff;
margin: 1.5em
}
#sample1 { overflow: scroll }
#sample2 { overflow: auto }
#sample3 { overflow: hidden }
#sample4 { overflow: visible }
p {
width: 255px;
height: 70px;
line-height: 1.5;
color: #000000;
background: #ffcc00
}
em {
font-style: normal;
font-weight: bold;
font-size: large;
color: #ff0000;
background: transparent
}

h1 {
text-align: center;
color: #ff6600
}
-->
</style>
</herd>
<body>
<h1>はみ出る部分の処理方法を指定する</h1>
<center>
<p id="sample1">
「<em>overflow: scroll</em>」を指定しています。
overflowは、内容がボックスの中に入りきらない場合に、
その部分をどの様に表示するかを設定するプロパティです。
</p>

<p id="sample2">
「<em>overflow: auto</em>」を指定しています。
overflowは、内容がボックスの中に入りきらない場合に、
その部分をどの様に表示するかを設定するプロパティです。
</p>

<p id="sample3">
「<em>overflow: hidden</em>」を指定しています。
overflowは、内容がボックスの中に入りきらない場合に、
その部分をどの様に表示するかを設定するプロパティです。
</p>

<p id="sample4">
「<em>overflow: visible</em>」を指定しています。
overflowは、内容がボックスの中に入りきらない場合に、
その部分をどの様に表示するかを設定するプロパティです。
</p>
</center>
</body>
</html>