overflowプロパティ
overflow : 値 |
overflowプロパティは、表示領域を超える場合の表示方法を指定します。
値 | 説明 |
---|---|
visible | 表示領域を超えた分は、はみ出して表示します。 (初期値) |
hidden | 表示領域を超えた分は、表示しません。 この用途でよく使われます。 |
scroll | 表示領域を超えた分は、スクロールで表示します。 |
auto | ブラウザによって変わります。スクロールが一般的です。 |
値を継承する |
- 日本語は改行されます。
- 以下はMDNのoverflowプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/overflow
はみ出して表示 (overflow:visible)
<style>
#p1,#p2 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
overflow: visible;
}
</style>
<p id="p1">hyoujiryouikiwokoerubaai(overflow)</p>
<p id="p2">表示領域を超える場合の表示方法</p>
visibleは、表示領域を超えた分ははみ出して表示します。日本語は改行されます。
超える分は表示しない (overflow:hidden)
<style>
#p1,#p2 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
overflow: hidden;
}
</style>
<p id="p1">hyoujiryouikiwokoerubaai(overflow)</p>
<p id="p2">表示領域を超える場合の表示方法</p>
hiddenは、表示領域を超えた分は表示しません。日本語は改行されます。
スクロールで表示 (overflow:scroll)
<style>
#p1,#p2 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
overflow: scroll;
}
</style>
<p id="p1">hyoujiryouikiwokoerubaai(overflow)</p>
<p id="p2">表示領域を超える場合の表示方法</p>
scrollは、表示領域を超えた分はスクロールで表示します。
ブラウザによる (overflow:auto)
<style>
#p1,#p2 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
overflow: auto;
}
</style>
<p id="p1">hyoujiryouikiwokoerubaai(overflow)</p>
<p id="p2">表示領域を超える場合の表示方法</p>
autoは、ブラウザによって変わります。スクロールが一般的です。
関連の記事