CSS3 オーバーフロープロパティの説明

1. オーバーフロー

Overflow はオーバーフロー（コンテナ）です。コンテンツがコンテナを越える場合は、hidden に overflow 属性値を追加するだけで、コンテナを越える部分を非表示にできます。

コンテンツがコンテナーを超えているが非表示にしたくない場合は、プロパティ値を auto に設定できます。

overflow: auto 属性 値が制限を超えるとスクロール バーが表示されます。値が制限を超えない場合はスクロール バーは表示されません。

スクロール バーは、たとえば、overflow-x: hidden; overflow-y: auto; のように個別に設定して、垂直スクロール バーだけが表示されるようにすることもできます。 x軸またはy軸を個別に定義する場合は、両方の属性の属性値を設定する必要があります。

オリジナル効果:

overflow: hidden; 属性、効果を追加します:

ご覧の通り、overflow:hidden はボックスからはみ出した部分を非表示にしますが、これは切り取るとも解釈できます。

2. overflow-x: hidden; overflow-y: auto プロパティを追加します。

プロパティは、overflow-x: auto、overflow-y: hidden に設定されています。効果は上の図とまったく逆で、スクロール バーの側面が非表示になり、下部に表示されます。

2. オーバーフローの共通属性値

一般的なオーバーフロー属性には、visible、hidden、auto、scroll の 4 つがあります。

Visible は、オーバーフローのデフォルト値であり、表示を超えることを意味します。

隠されたものは隠されたものを超えたものである。

auto は自動です。つまり、値が制限を超えるとスクロール バーが表示され、値が制限を超えない場合はスクロール バーは表示されません。

スクロールが設定されている場合、コンテンツはトリミングされますが、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。

3. オーバーフローの魔法の使い方

最初の使用法: マージントップ伝達問題を解決する

マージントップの伝達問題: 子要素のマージントップが親要素を一緒に下げてしまいます。これは親要素にoverflow:hiddenを追加することで解決できます。

2つ目の使い方: フローティングの影響をクリアする --- 親要素の高さを縮小する

ユニバーサルクリーニング方法

オーバーフロー:非表示

クリア:両方

3番目の用途: アニメーションを表示する --- 隠す以上のもの

4番目の使用法: 単一行テキストが省略記号を超える

.sl{

    white-space:nowrap;/*改行なし*/

    overflow:hidden;/*hidden を超えています*/
    
    text-overflow:ellipsis;/*省略記号を超えています*/

    幅：;

}

幅を設定する必要があることに注意してください

以上がCSS3:overflowプロパティの詳しい説明です。CSS3のoverflowプロパティについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください！