overflow - 領域をあふれた文字列の扱いを指定する

ライター　福田和宏

2009.12.11

構文

overflow : 処理方法;

説明文

　　ボックス要素などで指定された領域以上の文字列や画像が要素内にある場合，あふれた部分をどのように処理するかを指定する。例えば，あふれた部分は表示しない，スクロール・バーを付加してスクロールできるようにするといった処理が行える。

　指定できる値は以下の通り。

処理	意味
visible	あふれた領域をそのまま表示する
hidden	あふれた領域は表示しない
scroll	領域にスクロール・バーを付加し，あふれた文字列をスクロールして閲覧できるようにする
auto	Webブラウザによって自動判断される

使用例

● CSSの定義

div { width : 200px;
      height : 100px;
      margin : 10px;;
      float : left; }

div.show { overflow : visible;
           background-color : #c0ffc0; }
	
div.hidden { overflow : hidden;
            background-color : #ffc0c0; }
	
div.scroll { overflow : scroll;
             background-color : #c0c0ff; }

● HTMLの例

<div class="show">
<h3>サーバーの基礎知識</h3>
<p>サーバーではクライアントに各種サービスを提供するコンピュータのことであ
る。例えば，Weページを公開するWebサーバーやメールの送受信を行うメール送信
サーバー，ドメイン名からIPアドレスを導き出すDNSサーバーなどがある。</p>
</div>

<div class="hidden">
<h3>サーバーの基礎知識</h3>
<p>サーバーではクライアントに各種サービスを提供するコンピュータのことであ
る。例えば，Weページを公開するWebサーバーやメールの送受信を行うメール送信
サーバー，ドメイン名からIPアドレスを導き出すDNSサーバーなどがある。</p>
</div>

<div class="scroll">
<h3>サーバーの基礎知識</h3>
<p>サーバーではクライアントに各種サービスを提供するコンピュータのことであ
る。例えば，Weページを公開するWebサーバーやメールの送受信を行うメール送信
サーバー，ドメイン名からIPアドレスを導き出すDNSサーバーなどがある。</p>
</div>

● 表示結果

Internet Explorerの表示例