CSS overflow はみ出し部分を表示する/しない

CSSのoverflowのサンプルです。

サンプル	overflowプロパティ
	はみ出して表示 (overflow:visible)
	超える分は表示しない (overflow:hidden)
	スクロールで表示 (overflow:scroll)
	ブラウザによる (overflow:auto)

overflowプロパティ

overflow : 値

overflowプロパティは、表示領域を超える場合の表示方法を指定します。

値	説明
visible	表示領域を超えた分は、はみ出して表示します。 (初期値)
hidden	表示領域を超えた分は、表示しません。この用途でよく使われます。 floatの解除でも使用されます。(※1)
scroll	表示領域を超えた分は、スクロールで表示します。
auto	ブラウザによって変わります。スクロールが一般的です。
値を継承する

日本語は改行されます。
※1 floatを解除: https://itsakura.com/css-float-clear#s3
以下は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 class="p1">hyoujiryouikiwokoerubaai(overflow)</p>
<p class="p2">表示領域を超える場合の表示方法</p>

visibleは、表示領域を超えた分ははみ出して表示します。日本語は改行されます。

超える分は表示しない (overflow:hidden)

<style>
  .p1,.p2 {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: LightCyan;
    overflow: hidden;
  }
</style>
<p class="p1">hyoujiryouikiwokoerubaai(overflow)</p>
<p class="p2">表示領域を超える場合の表示方法</p>

hiddenは、表示領域を超えた分は表示しません。日本語は改行されます。

スクロールで表示 (overflow:scroll)

<style>
  .p1,.p2 {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: LightCyan;
    overflow: scroll;
  }
</style>
<p class="p1">hyoujiryouikiwokoerubaai(overflow)</p>
<p class="p2">表示領域を超える場合の表示方法</p>

scrollは、表示領域を超えた分はスクロールで表示します。

ブラウザによる (overflow:auto)

<style>
  .p1,.p2 {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: LightCyan;
    overflow: auto;
  }
</style>
<p class="p1">hyoujiryouikiwokoerubaai(overflow)</p>
<p class="p2">表示領域を超える場合の表示方法</p>

autoは、ブラウザによって変わります。スクロールが一般的です。