liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0のレイアウト関連 - overflow属性

CSS3.0 ┗━CSS3.0のレイアウト関連

overflow属性は表示しきれない場合の動きを設定する。

属性

  • overflow
  • overflow-x
  • overflow-y
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> overflow属性 </title>
   <style type="text/css">
        div {
            width: 300px;
            height: 70px;
            border: 1px solid black;
            white-space: nowrap;
            margin: 15px;
        }
    </style>
</head>
<body>
<div>
    <h3>overflow設定なし</h3>
    テスト文字列１テスト文字列１テスト文字列１テスト文字列１
</div>
<div style="overflow:hidden;">
    <h3>overflow:hidden;</h3>
    テスト文字列２テスト文字列２テスト文字列２テスト文字列２
</div>
<div style="overflow:auto;">
    <h3>overflow:auto;</h3>
    テスト文字列３テスト文字列３テスト文字列３テスト文字列３
</div>
<div style="overflow-x:hidden">
    <h3>overflow-x:hidden;</h3>
    テスト文字列４テスト文字列４テスト文字列４テスト文字列４
</div>
<div style="overflow-y:hidden">
    <h3>overflow-y:hidden;</h3>
    テスト文字列５テスト文字列５テスト文字列５テスト文字列５
</div>
</body>
</html>

f:id:liguofeng29:20160203211707p:plain