コンテンツがコンテナを超える場合、CSSのオーバーフロー屬性を使用する必要があります。一般的なシナリオには、長すぎるポップアップウィンドウ、切り捨てられたカード情報、固定された高さエリアにコンテンツの表示が含まれます。使用方法：1。オーバーフロー：表示可能なデフォルトオーバーフロー外部を表示します。 2.オーバーフロー：隠された隠れ家オーバーフローコンテンツ。 3.オーバーフロー：スクロールは常にスクロールバーを表示します。 4.オーバーフロー：自動表示が超えると、スクロールバーが表示されます。 erlypsis効果を達成するには、他の屬性と協(xié)力する必要があります。ホワイトスペースを使用してください：NowrapとText-Overflow：Ellipsisは、単一のラインの省略を達成し、複數(shù)のラインの脫落にWebkit-Line-Clampスキームまたは擬似エレメントシミュレーションを使用します。

ページのコンテンツが大きすぎてレイアウトが壊れている場合があります?，F(xiàn)時點では、CSS overflow屬性を使用してオーバーフローコンテンツを処理する必要があります。コンテンツがコンテナを超えたときに、非表示、スクロール、またはそのままにするかどうかを制御するのに役立ちます。

オーバーフローをいつ使用する必要がありますか？

要素に固定された高さまたは幅を設(shè)定したり、 max-width / max-heightを使用したりすると、多くのコンテンツを簡単に「使い果たす」ことができます。たとえば、カードコンポーネントにテキストが多すぎる場合、または固定サイズのポップアップウィンドウをインストールできない場合、これらの狀況はoverflowによって制御できます。

一般的なシナリオは次のとおりです。

• ポップアップコンテンツが長すぎてスクロールする必要があります
• 楕円を表示するために切り捨てられたカード情報
• 固定された高さエリアに表示されるコンテンツの一部のみが表示されます

この時點で、コンテナにoverflow屬性を追加することを検討する必要があります。

共通の値と使用をオーバーフローします

CSSのoverflow 、それぞれが異なる効果を持ついくつかの一般的に使用される値をサポートしています。

• visible （デフォルト）：コンテンツはトリミングされず、箱の外側(cè)に表示されます
• hidden ：部品を超えることは直接隠れています
• scroll ：コンテンツを超えているかどうかに関係なく、スクロールバーが表示されます
• auto ：スクロールバーは、コンテンツがコンテンツを超えている場合にのみ表示され、コンテンツを超えない場合は表示されません。

たとえば、コンテンツがコンテンツを超えた後にDIVを自動的に表示する場合は、次のように書くことができます。

 。箱 {
  幅：200px;
  Max-Height：100px;
  オーバーフロー：自動;
}

コンテンツがオーバーフローせず、ユーザーにスクロールして表示したくない場合は、 overflow: hidden; 。

テキストをあふれさせて楕円を表示したい場合はどうすればよいですか？

overflow: hidden; 「...」の効果を達成するには、他の屬性と協(xié)力する必要があります。一般的に、シングルラインの省略：

 。文章 {
  ホワイトスペース：nowrap;
  オーバーフロー：隠し;
  テキストオーバーフロー：省略記號;
}

複數(shù)の行が省略されている場合は、 -webkit-line-clamp使用できます。

 .Multi-Line {
  ディスプレイ：-WebKit -Box;
  -webkit-box-orient：垂直;
  -webkit-line-clamp：3;
  オーバーフロー：隠し;
}

この方法には適切な互換性がありますが、すべてのブラウザがネイティブにサポートされているわけではありません?；Q性の要件が高い場合、擬似要素を使用して楕円をシミュレートすることもできます。

基本的にそれだけです。 overflow単純に見えますが、実際のレイアウトでは非常に実用的です。重要なのは、異なる値の行動の違いと、他の屬性と組み合わせてそれらを使用する方法を理解することです。

以上がCSSオーバーフロープロパティを使用したオーバーフローコンテンツの管理の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。