　内容が収まらない時の処理

■overflow:

指定できる値

キーワードで指定

visible  すべての内容を表示
scroll   常にスクロールバーを表示
hidden   収まりきらない内容はカットされる
auto     収まりきらない場合はスクロールバーを表示

前のページで、ボックスの横幅と高さを指定する方法について説明しましたが、その大きさを指定したボックス内にテキストがすべて収まらない時、言い換えればボックス内に表示しきれないテキストや画像の処理をどうするかを設定するのが、overflowプロパティです。

このプロパティではキーワードでvisible,scroll,hidden,autoの4つの値を指定することが出来ます。

まず、visibleですが、これはボックス内にテキストが収まりきらない時には自動的に高さを変更し、すべてのテキストを表示させます。overflowプロパティを指定しない場合も、これと同じ結果になります。

次に、scrollですが、これはボックス内のテキストが収まっているいない関係なく、常にスクロールバーが表示されます。

そしてhiddenですが、この値を指定すると、ボックス内に収まらないテキストは途中で切り取られてしまいます。ボックスの大きさは、指定した大きさのままです。

autoを指定すれば、テキストがボックスに収まりきらない時はスクロールバーを表示し、収まりきる時にはスクロールバーは表示されません。

サンプル - Microsoft Internet Explorer

横幅100px、高さ60pxのボックスに収まりきらない文字は、切り取られます。

横幅100px、高さ20pxのボックスですが、すべて表示されるように高さが変更されます。

HTML&CSS

<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
.test1  { width:100px;
          height:60px;
          overflow:hidden; }
p{border-style:solid;
border-color:#ffcc00;}
.test2  { width:100px;
          height:20px;
          overflow:visible; }
-->
</style>
</head>
<body>
<p class="test1">
横幅100px、高さ60pxのボックスに
収まりきらない文字は、切り取られます。</p>
<p class="test2">
横幅100px、高さ20pxのボックスですが、
すべて表示されるように高さが変更されます。</p>
<hr>
</body>
</html>

値にscrollを指定した場合

サンプル - Microsoft Internet Explorer

収まる場合

横幅と高さが100pxのボックス

収まらない場合

このように、内容がボックスからあふれる時には、スクロールバーを使って内容を表示できます。

値にautoを指定した場合

サンプル - Microsoft Internet Explorer

収まる場合

横幅と高さが100pxのボックス

収まらない場合

このように、autoを指定すれば内容がボックスからあふれる場合のみにスクロールバーを表示できます。