CSS
オーバーフロー

構文

• オーバーフロー：可視|隠された|スクロール|オート|最初の|継承する;

パラメーター

備考

オーバーフロー：スクロール

HTML

<div>
    This div is too small to display its contents to display the effects of the overflow property.
</div>

CSS

div {
    width:100px;
    height:100px;
    overflow:scroll;
}

結果

上記のコンテンツは、100px×100pxボックスでクリップされ、オーバーフローするコンテンツを表示するためのスクロールが可能です。

ほとんどのデスクトップブラウザでは、コンテンツがクリップされているかどうかにかかわらず、水平スクロールバーと垂直スクロールバーの両方が表示されます。これにより、動的環境でスクロールバーが表示されたり消えたりする問題を回避できます。プリンタは、オーバーフローしたコンテンツを印刷することがあります。

オーバーフローラップ

overflow-wrapは、目的の要素内のテキストの行を、それ以外の場合は破られない場所の複数の行に分割することができることをブラウザに通知します。コンテナのオーバーフローによるレイアウトの問題を引き起こす長い文字列の防止に役立ちます。

CSS

div {
    width:100px;
    outline: 1px dashed #bbb;
}

#div1 {
    overflow-wrap:normal;
}

#div2 {
    overflow-wrap:break-word;
}

HTML

<div id="div1">
      <strong>#div1</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> is too long so it will overflow past the edge of the line-break
</div>

<div id="div2">
      <strong>#div2</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> will be split at the line break and continue on the next line.
</div>

オーバーフロー：可視

HTML

<div>
     Even if this div is too small to display its contents, the content is not clipped.
</div>

CSS

div {
     width:50px;
     height:50px;
     overflow:visible;
}

結果

コンテンツはクリップされず、コンテナサイズを超えている場合はコンテンツボックスの外にレンダリングされます。

オーバーフローで作成されたブロック書式設定コンテキスト

overflowプロパティをvisibleと異なる値で使用すると、新しいブロック書式設定コンテキストが作成されます 。これは、浮動要素の隣にあるブロック要素を整列させる場合に便利です。

CSS

img {
    float:left;
    margin-right: 10px;
}
 div {
     overflow:hidden; /* creates block formatting context */
}

HTML

<img src="http://placehold.it/100x100">
<div>
  <p>Lorem ipsum dolor sit amet, cum no paulo mollis pertinacia.</p>
  <p>Ad case omnis nam, mutat deseruisse persequeris eos ad, in tollit debitis sea.</p>
</div>

結果

この例は、 overflowプロパティが設定されたdiv内の段落が浮動イメージとどのように相互作用するかを示しています。

overflow-xおよびoverflow-y

これらの2つのプロパティは、 overflowプロパティと同様に動作し、同じ値を受け入れます。 overflow-xパラメータは、x軸または左から右の軸でのみ機能します。 overflow-yは、y軸または上から下の軸で動作します。

HTML

<div id="div-x">
    If this div is too small to display its contents, 
    the content to the left and right will be clipped.
</div>

<div id="div-y">
    If this div is too small to display its contents, 
    the content to the top and bottom will be clipped.
</div>

CSS

div {
    width: 200px;
    height: 200px;
}

#div-x {
    overflow-x: hidden;
}

#div-y {
    overflow-y: hidden;
}