読者です 読者をやめる 読者になる 読者になる

liguofeng29’s blog

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

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

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>
    テスト文字列1テスト文字列1テスト文字列1テスト文字列1
</div>
<div style="overflow:hidden;">
    <h3>overflow:hidden;</h3>
    テスト文字列2テスト文字列2テスト文字列2テスト文字列2
</div>
<div style="overflow:auto;">
    <h3>overflow:auto;</h3>
    テスト文字列3テスト文字列3テスト文字列3テスト文字列3
</div>
<div style="overflow-x:hidden">
    <h3>overflow-x:hidden;</h3>
    テスト文字列4テスト文字列4テスト文字列4テスト文字列4
</div>
<div style="overflow-y:hidden">
    <h3>overflow-y:hidden;</h3>
    テスト文字列5テスト文字列5テスト文字列5テスト文字列5
</div>
</body>
</html>

f:id:liguofeng29:20160203211707p:plain