cssを記述していくと、指定したボックスの大きさでは中に製作したテキストや画像などが入りきらない場合が出てきます。そんな場合に（overflow）プロパティを使うことで、ボックスに入りきらない部分の表示を設定することができます。
今回は、その（overflow）プロパティの使い方をご紹介します。
overflowプロパティの使い方
|
1 2 3 |
要素 { overflow: 種類; } |
実際の記述の仕方はこうなります。例を見ていきましょう。
|
1 2 3 4 5 6 |
p.test1 { width: 50px; height: 20px; background-color: skyblue; overflow: visible; } |
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <p class="test1"> <b>visibleテスト</b><br> こんな感じに入りきらない部分ははみ出します！！<br> TSTTESTTESTTESTTESTTESTTESTTESTTEST </p> </body> |
上記の様に記述すると、こんな風に表示されます。
値を変えるとそれぞれの指定が適用されます。（scroll）を入れると表示は以下の様になります。
（hidden）を入れると、入りきらなかった部分は表示されません。
その他にも値に（auto）を入れることもできます。その場合、はみ出した部分の表示の仕方はブラウザによって決定されます。大抵の場合は（scroll）になります。
