オーバーフロー屬性は、隠れ、スクロール、または自動(dòng)的に調(diào)整することにより、オーバーフローコンテンツを処理します。主な値には、1。hiddendirect croppingが含まれます。 2。スクロールは常にスクロールバーを表示します。 3。必要に応じて、スクロールバーを自動(dòng)表示します。 4.オーバーフローXおよびオーバーフローYは、それぞれ水平および垂直オーバーフローを制御できます。 1。オーバーフロー：Hiddenは、コンテンツのオーバーフローを避けるために使用されます。 2。オーバーフロー：スクロールは、チャットウィンドウまたは固定サイズのサイドバーに適しており、インターフェイスを一貫性に保ちます。 3。オーバーフロー：Autoは、柔軟なスクロールを?qū)g現(xiàn)するために、テーブルまたはユーザー生成コンテンツに適しています。 4. Overflow-XとOverflow-Yを獨(dú)立して設(shè)定するときの相互作用の論理的な一貫性に注意してください。選択するときは、レイアウト要件とユーザーエクスペリエンスを組み合わせる必要があります。

要素內(nèi)のコンテンツが大きすぎて境界內(nèi)に収まると、 overflowプロパティはそのコンテンツの処理方法を決定します。設(shè)定した値に応じて、隠したり、表示されたり、スクロールしたり、自動(dòng)調(diào)整されたりすることさえできます。

overflowの各共通の値がどのように動(dòng)作するか、そしてそれらを使用するのが理にかなっているときを詳しく見(jiàn)てみましょう。

1。オーバーフロー非表示：クリッピングコンテンツ

overflow: hidden 、要素のボックスを超えたコンテンツをクリップします。 Scrollbarsは表示されず、追加のコンテンツは表示されません。

これは、次のような場(chǎng)合に役立ちます。

• テキストがこぼれてはならないクリーンなカードや箱を作成する
• 要素の一部が明らかになるまで隠されたままである必要があるアニメーション効果
• 予期しない大規(guī)模なコンテンツによって引き起こされるレイアウトシフトの防止

例：

 。箱 {
  幅：200px;
  高さ：100px;
  オーバーフロー：隠し;
}

.box內(nèi)の段落がコンテナが許すよりも長(zhǎng)い場(chǎng)合、最初の數(shù)行のみが表示されます - 殘りは切り取られます。

特にレスポンシブレイアウトでは、カットされるコンテンツの量をチェックせずに、これを適用することです。

2。オーバーフロースクロール：常にスクロールバーを表示します

overflow: scrollコンテンツがオーバーフローするかどうかに関係なく、スクロールバーが表示されることを確認(rèn)します。これにより、ユーザーは一貫したインターフェイスが得られますが、実際のオーバーフローがない場(chǎng)合は不必要に感じる場(chǎng)合があります。

それは役に立ちます：

• スクロールが予想されるWindowsまたはコメントセクションをチャットします
• 成長(zhǎng)する可能性のある動(dòng)的なコンテンツを備えたウィジェットまたはパネル
• クロスブラウザーの一貫性（一部のブラウザは、必要に応じてスクロールバーを表示するだけです）

これが固定サイズのモーダルやサイドバーで使用されることがよくあります。

ヒント：一部のプラットフォーム（MacOSなど）では、積極的に使用されていない限り、Scrollbarsは自動(dòng)隠れている場(chǎng)合があります。したがって、視覚的な手がかりだけに依存しないでください。

3.オーバーフロー自動(dòng)：必要な場(chǎng)合にのみスクロールバー

これはおそらく最も柔軟なオプションです。 overflow: autoと、ブラウザはコンテンツがコンテナサイズを超えた場(chǎng)合にのみスクロールバーを表示します。

ユースケースは次のとおりです。

• コンテナよりも広い可能性のあるテーブルまたはコードブロック
• オーバーフローが畫(huà)面サイズによって異なる可能性のあるレスポンシブデザイン要素
• 長(zhǎng)さを予測(cè)できないユーザー生成コンテンツ

オーバーフローを優(yōu)雅に処理しながら不必要なスクロールバーを回避するため、安全なデフォルトです。

スクロールバーを持つこととNOTを使用することを切り替えると、レイアウト（特に水平スクロール）がわずかに影響する可能性があるため、さまざまなシナリオをテストすることに注意してください。

4.垂直と水平オーバーフローの処理別々

また、 overflow-yおよびoverflow-xを使用して、垂直および水平オーバーフローを獨(dú)立して制御することもできます。

例えば：

 。容器 {
  Overflow-y：auto; / *垂直スクロール */
  Overflow-X：非表示; / *水平スクロールなし */
}

これは、水平スクロールを許可しないが、それでも垂直スクロールが必要な幅広いテーブルや畫(huà)像を扱うときに役立ちます。

しかし、注意してください - これらを混ぜると、思慮深く処理されないと混亂する行動(dòng)につながる可能性があります。たとえば、1つの軸をautoに設(shè)定し、もう1つの軸をhiddenに設(shè)定すると、予期しない方法でコンテンツをトラップする場(chǎng)合があります。

実際には、適切なoverflow値を選択することは、レイアウトのニーズと、ユーザーにコンテンツと対話する方法によって異なります。ほとんどの場(chǎng)合、 autoまたはhidden典型的なケースをカバーしますが、 scrollまたはスプリット軸設(shè)定はより専門(mén)的なツールです。

基本的にそれだけです。

以上がオーバーフロープロパティは、要素の境界を超えるコンテンツをどのように管理しますか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。