overflowの使い方

overflow

プロパティの説明

overflowは、要素の中に内容が入りきらないときにどうするかを指定するプロパティです。ブロック要素に指定することができます。

指定できる値

visible: 標準設定。要素に入らない部分は、はみだして表示します。
hidden: 要素に入らない部分は、表示しないようにします。
scroll: 要素に入らない部分をスクロールして見れるようにします。
auto: ブラウザが適当に判断して表示するようにします。

サンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title>サンプルページ</title>
 <style type="text/css">
 <!--
 .o1{width:72px; height:60px; overflow:hidden;}
 .o2{width:72px; height:60px; overflow:scroll;}
 .o3{width:72px; height:60px; overflow:auto;}
 -->
 </style>
</head>

<body>
 <h1>サンプルページ</h1>
 <p class="o1">横72px、縦60px以上のものは途切れて表示させます。</p>
 <p class="o2">横72px、縦60px以上のものはスクロールさせます。</p>
 <p class="o3">横72px、縦60px以上のものはスクロールさせます。</p>
</body>

</html>