PR

構文

overflow : 処理方法;

説明文

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

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

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

使用例

● 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の表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]