[css3]CSS3:overflowプロパティ

1. オーバーフロー

overflowはオーバーフロー（コンテナ）のことで、コンテンツがコンテナを超えた場合、overflow属性の値をhiddenにするだけでコンテナからオーバーフローが隠れるようになります。

コンテンツを非表示にしたくない場合は、overflow プロパティを auto に設定します。

overflow: auto属性は、範囲外の場合はスクロールバーを表示させますが、範囲外の場合はスクロールバーを表示させないようにします

オリジナルの効果です。

overflow: hidden; 属性を追加すると、次のような効果があります。

ご覧のように、overflow:hiddenはボックスからはみ出した部分を隠すので、カットオフと解釈することもできます。

2. overflow-x:hidden; overflow-y:auto 属性を追加します。

属性は overflow-x: auto; overflow-y: hidden に設定されています。上の画像と逆の効果、つまりスクロールバーが横に隠れて下に表示されるようになるのです。

2. overflowの一般的なプロパティ値

4つの一般的なオーバーフロージェネリック：visible、hidden、auto、scroll。

visible は overflow のデフォルト値で、display を超えています。

hidden は、その先の hidden を表します。

autoは自動を意味し、beyondならスクロールバーが表示され、beyondでないならスクロールバーが表示されない。

scrollは、コンテンツは切り取られるが、ブラウザはコンテンツの残りを見るためにスクロールバーを表示することを意味します。

3. オーバーフローのファンタスティックな使い方

最初の使用例：マージントップのパス問題の解決

margin-top通過問題：子要素のmargin-topが親要素を一緒に下げてしまうので、親要素にoverflow:hiddenを追加して解決する

二度目の使用：floatの効果を消す --- 親要素の高さが崩れる

汎用的な削除方法

overflow:hidden

クリア：両方

第3の使用法：アニメーションの表示と非表示 --- 非表示の先にあるもの

第四の使用法：省略を超えた一行テキスト

.sl{

    white-space:nowrap;/*no line break*/

    overflow:hidden;/* beyond hidden*/
    
    text-overflow:ellipsis;/* beyond omitted*/

    width:;

}

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

上記はCSS3: overflowプロパティの詳細な内容です。CSS3 overflowプロパティの詳細な情報は、スクリプトハウスの他の関連記事に注目してください