CSS Overflow

目次

1. CSS Overflow プロパティ
2. overflow: visible
3. overflow: hidden
4. overflow: scroll
5. overflow: auto
6. すべての CSS Overflow プロパティ

CSS Overflow プロパティ

CSS の overflow プロパティは、領域に収まらないほど大きすぎるコンテンツの処理方法を制御します。

overflow 属性は、要素のコンテンツが大きすぎて指定した領域に収まらない場合に、コンテンツをクリップするかスクロール バーを追加するかを指定します。

overflow 属性では、次の値を設定できます。

• visible - デフォルト。 オーバーフローはクリップされません。 コンテンツは要素のボックスの外側にレンダリングされます
• hidden - オーバーフローが切り取られ、残りのコンテンツは非表示になります
• scroll - オーバーフローが切り取られ、残りを表示するためにスクロールバーが追加されます
• auto - scroll と同様ですが、必要な場合にのみスクロールバーを追加します

注:overflow この属性は、指定された高さのブロック要素にのみ適用されます。

注: OS X Lion (Mac 上) では、スクロールバーはデフォルトで非表示になり、(「overflow :scroll」を使用した場合でも) 使用時のみ表示されます。

overflow: visible

デフォルトでは、オーバーフローは表示されます (visible)。つまり、オーバーフローはクリップされず、要素のボックスの外側にレンダリングされます。

例

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

a 要素は overflow:visible の属性を持ち、内部コンテンツが多い場合には 2 つの場合に分けて議論できます。

1、a 要素の高さ自動: 効果なし、要素は引き伸ばされ、通常のスクロール

2、a 要素の高さは固定です。 A の高さは制限されていますが、内部コンテンツは非表示になりませんが、画面上に完全に表示され、レイアウトに参加し、要素の高さも拡張されます。外側のドーム。

a 要素に高さがある場合、overflow:visible を使用せず、overflow ファミリの他の属性値を使用します。

overflow: hidden

hidden 値を使用すると、オーバーフローがクリップされ、残りが非表示になります。

例

div {
  overflow: hidden;
}

注意

1. 1. overflow:hidden は余分な部分を非表示にします。通常、ページでは、オーバーフローの後に省略記号が表示されます。たとえば、テキスト行が固定幅を超える場合、余分な部分は省略記号で表示されます。コンテンツは非表示になり、省略記号が表示されます。
2. 2. overflow:hidden クリアフローティング: 一般に、親要素の高さが設定されていない場合、高さはコンテンツに応じて増加し、高さに適応します。 親要素内のすべての子要素が float に設定されている場合、子要素は標準フローから外れ、スペースを占有しません。親要素は子要素の高さを検出できず、親要素の高さは0.
3. 3. overflow:hidden 外側のマージンの崩壊を解決します。親要素の中に子要素があり、子要素に ma@rgin-top スタイルを追加すると、親要素がが続き、マージンの崩壊が発生します。

overflow: scroll

値が scroll に設定されている場合、オーバーフローがクリップされ、ボックス内をスクロールするためのスクロールバーが追加されます。 これにより、水平方向と垂直方向の両方にスクロールバーが追加されることに注意してください (必要ない場合でも)。

例

div {
  overflow: scroll;
}

問題: p 要素で囲まれた div 内に書かれたテキストは、もともと overflow:scroll に設定されており、スライダーをスライドして内容を表示しますが、親要素 (div) の幅と高さが特定の値に変更されると、 、スライド ブロックが魔法のように消えます、なぜですか?

理由: オーバーフローのトリガーには特定の条件があります。子要素の幅と高さが、オーバーフローを引き起こす親要素の幅と高さよりも大きい場合にのみ、オーバーフローがトリガーされます。このとき、そのいくつかの値は、 (スクロール含む)正常に動作します。

解決策: オーバーフローを引き起こすには、親要素 (div) の幅と高さを子要素よりも小さく設定します。 これは水平方向で行うことができ、親要素の垂直方向の固定高さを設定するだけで済みます。 (下)

div{
    width: 120px;
    height: 200px;
    border: 2px solid black;
    overflow: scroll;
}
p{
    width: 150px;
}

overflow: auto

auto 値は scroll と似ていますが、必要な場合にのみスクロールバーを追加します。

例

div {
  overflow: auto;
}

overflow:auto を解決します; スライドがスムーズではありません

-webkit-overflow-scrolling: touch;

overflow-x 和 overflow-y

overflow-x 属性と overflow-y 属性は、コンテンツのオーバーフローを水平方向のみに変更するか垂直方向にのみ変更するか (または両方) を指定します。

• overflow-x は、コンテンツの左端/右端の処理方法を指定します。
• overflow-y は、コンテンツの上端/下端の処理方法を指定します。

例

div {
  overflow-x: hidden; /* 水平スクロールバーを非表示にする */
  overflow-y: scroll; /* 垂直スクロールバーを追加 */
}

すべての CSS Overflow プロパティ