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>