CSSのoverflowプロパティで、表示領域を超える場合の表示方法のサンプルです。
目次
| 仕様 | overflowプロパティの仕様 |
| サンプル | overflowのサンプル |
overflowプロパティの仕様
| overflow : 値 |
overflowプロパティは、表示領域を超える場合の表示方法を指定します。
| 値 | 説明 |
|---|---|
| visible | 表示領域を超えた分は、はみ出して表示します。 (初期値) |
| hidden | 表示領域を超えた分は、表示しません。 |
| scroll | 表示領域を超えた分は、スクロールで表示します。 |
| auto | ブラウザによって変わります。スクロールが一般的です。 |
| 値を継承する | |
- 日本語は改行されます。
- 以下はMDNのoverflowプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/overflow
overflowのサンプル
overflowのサンプルです。
<style>
#p1{overflow:visible;} /* 表示領域を超えた分は、はみ出して表示 */
#p2{overflow:hidden;} /* 表示領域を超えた分は、表示しません */
#p3{overflow:scroll;} /* 表示領域を超えた分は、スクロールで表示 */
#p4{overflow:auto;} /* ブラウザによって変わります */
#p5{overflow:visible;} /* 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>1行目は、visibleです。表示領域を超えた分は、はみ出して表示します。
2行目は、hiddenです。表示領域を超えた分は、表示しません。
3行目は、scrollです。表示領域を超えた分は、スクロールで表示します。
4行目は、autoです。ブラウザによって変わります。
5行目は、文字が日本語の場合です。visibleですが改行されます。
以下は、実行結果です。
関連の記事