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

overflowプロパティ

overflow : 値

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

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

はみ出して表示 (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は、ブラウザによって変わります。スクロールが一般的です。

関連の記事

CSS overflow-wrap 単語が表示域を超える時の改行
CSS word-break 単語の改行方法を指定

△上に戻る