CSS 表示領域を超える場合の表示方法(overflow)

CSSの表示領域を超える場合の表示方法です。
overflowプロパティを使用します。

overflow プロパティ

overflow : 値
説明
visible 表示領域を超えた分は、はみ出して表示します。 (初期値)
hidden 表示領域を超えた分は、表示しません。
scroll 表示領域を超えた分は、スクロールで表示します。
auto ブラウザによって変わります。スクロールが一般的です。
値を継承する

サンプル

overflowのサンプルです。
1番上は、visibleです。表示領域を超えた分は、はみ出して表示します。
2番目は、hiddenです。表示領域を超えた分は、表示しません。
3番目は、scrollです。表示領域を超えた分は、スクロールで表示します。
4番目は、autoです。ブラウザによって変わります。これはchromeで確認しました。
5番目の日本語は、visibleですが改行されています。

コード

上記サンプルのコードです。

<style>
#p1{
	overflow:visible;
}
#p2{
	overflow:hidden;
}
#p3{
	overflow:scroll;
}
#p4{
	overflow:auto;
}
#p5{
	overflow:visible;
}
p{border:1px solid #000;width:150px;height:50px;
margin-bottom:10px;text-indent:10px;background:LightCyan;}
</style>

<p id="p1">hyoujiryouikiwokoerubaai(overflow)</p>
<p id="p2">hyoujiryouikiwokoerubaai(overflow)</p>
<p id="p3">hyoujiryouikiwokoerubaai(overflow)</p>
<p id="p4">hyoujiryouikiwokoerubaai(overflow)</p>
<p id="p5">表示領域を超える場合の表示方法</p>

関連の記事

CSS 文字の色を指定するサンプル(color)
CSS フォントを指定するサンプル(font-family)
CSS 文字を左寄せ/右寄せにするサンプル(text-align)
CSS 垂直の位置を指定するサンプル(vertical-align)
CSS 行の高さを指定するサンプル(line-height)
CSS 文字の間隔を指定するサンプル(letter-spacing)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)
CSS 文字に線を引くサンプル(text-decoration)
CSS 単語の改行方法を指定するサンプル(word-break)

△上に戻る