HOME >> スタイルシート > 内容が収まらない時の処理

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

overflow:
指定できる値
キーワードで指定
visible  すべての内容を表示
scroll 常にスクロールバーを表示
hidden 収まりきらない内容はカットされる
auto 収まりきらない場合はスクロールバーを表示
前のページで、ボックスの横幅と高さを指定する方法について説明しましたが、その大きさを指定したボックス内にテキストがすべて収まらない時、言い換えればボックス内に表示しきれないテキストの処理をどうするかを設定するのが、overflowプロパティです。
このプロパティではキーワードでvisible,scroll,hidden,autoの4つの値を指定することが出来ます。

まず、visibleですが、これはボックス内にテキストが収まりきらない時には自動的に高さを変更し、すべてのテキストを表示させます。overflowプロパティを指定しない場合も、これと同じ結果になります。
次に、scrollですが、これはボックス内のテキストが収まっているいない関係なく、常にスクロールバーが表示されます。
そしてhiddenですが、この値を指定すると、ボックス内に収まらないテキストは途中で切り取られてしまいます。ボックスの大きさは、指定した大きさのままです。
autoを指定すれば、テキストがボックスに収まりきらない時はスクロールバーを表示し、収まりきる時にはスクロールバーは表示されません。

このプロパティは、Netscape Navivator4.7には、対応していません。
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

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


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

ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
P{border-style:solid;
border-color:#ffcc00;}
.test1  { width:100pt;
          height:20pt;
          overflow:visible; }
.test2  { width:100pt;
          height:60pt;
          overflow:hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P class="test1">
横幅100px、高さ20pxのボックスですが、
すべて表示されるように高さが変更されます。</P>
<HR>
<P class="test2">
横幅100px、高さ60pxのボックスに
収まりきらない文字は、切り取られます。</P>
</BODY>
</HTML> 
値にscrollを指定した場合
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)
収まる場合

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


収まらない場合

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

値にautoを指定した場合
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)
収まる場合

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


収まらない場合

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

Copyright ©2001〜2011 まさぼ〜 All Right Reserved