CSSのオーバーフロー属性の使い方を詳しく紹介していきます！私たちは経験を積んできましたので、それを共有したいと思います。お互いに修正してください。
CSS オーバーフロー プロパティ値:
1.visible: デフォルト値。コンテンツはトリミングされず、要素ボックスの外側に表示されます。
2. 非表示: コンテンツはトリミングされ、残りのコンテンツは非表示になります。
3. スクロール: コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
4. auto: コンテンツがトリミングされている場合、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。
オーバーフローの姉妹プロパティである overflow-y と overflow-x も 2 つありますが、これらはほとんど使用されません。これらのそれぞれの値を見て、一般的な使用法とテクニックについて説明します。
(1) オート
overflow の auto 値は、scroll と非常に似ています。解決できるのは、スクロール バーが必要ないときに表示される問題だけです。
(2)非表示
表示されるデフォルト値の反対の値は非表示になります。ボックスの外側にあるものはすべて隠されます。これは、コンテンツのオーバーフローによりレイアウトの問題が発生する可能性がある動的コンテンツを処理する場合に非常に役立ちます。ただし、この方法で非表示にしたコンテンツは(ソース コードを見ない限り) まったく表示されないことに注意してください。 たとえば、一部のユーザーがブラウザのデフォルト フォントを意図したよりも大きく設定している場合、一部のテキストをボックスの外に押し出し、完全に非表示にすることになります。
(3)可視化
オーバーフロー属性を設定しない場合は、デフォルトのオーバーフロー属性値が表示されます。したがって、一般的に言えば、他の場所で設定されている値をオーバーライドする場合を除き、オーバーフロー プロパティを明示的に可視に設定する理由はありません。ここで覚えておくべき重要な点は、ボックスの外側のコンテンツは表示されますが、コンテンツはページのワークフローに影響を与えないということです。一般的に言えば、少なくともコンテンツがテキストであるボックスについては固定の高さを設定する必要はないため、このような状況は発生しません。
(4)スクロール
ボックスのオーバーフロー値をスクロールに設定すると、ボックスの外側にレンダリングされたコンテンツが非表示になりますが、ボックス内にスクロールするためのスクロール バーが表示されるため、残りのコンテンツが表示されます。スクロールを使用すると、コンテンツで水平スクロール バーと垂直スクロール バーのいずれか 1 つだけが必要な場合でも、両方のスクロール バーが同時に生成されることに注意してください。
例: Visible および Hidden 属性値の使用
<!DOCTYPEhtml><html><head><style>div{width:550px;height:100px;margin-top:20px;border:1pxsolidred;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll ;}div.auto{overflow:auto;}</style></head><body><divclass=hidden>visible: デフォルト値。オーバーフローしたコンテンツは処理されず、コンテンツは要素コンテンツ領域の外側に表示されます。 ; <br>hidden: オーバーフロー要素のコンテンツ領域のコンテンツを非表示にします。 <br>scroll: オーバーフロー要素のコンテンツ領域のコンテンツを非表示にし、要素の左側と下にスクロール バーを作成します。 Content;<br>auto: コンテンツのオーバーフローが発生した場合、要素の左側にスクロール バーが作成され、スクロール バーをスライドすることで要素内のすべてのコンテンツを表示できます。 ;<br>inherit: 親要素からオーバーフロー属性の値を継承します。 </div><divclass=scroll>visible: デフォルト値。オーバーフローしたコンテンツは処理されず、コンテンツは要素コンテンツ領域の外側に表示されます。<br>hidden: オーバーフローした要素コンテンツ領域のコンテンツを非表示にします。<br> >スクロール: オーバーフロー要素のコンテンツ領域のコンテンツを非表示にし、要素の左側と下にスクロール バーを作成します。スクロール バーをスライドすると、要素内のすべてのコンテンツを表示できます。<br> auto: コンテンツのオーバーフローが発生した場合、要素の左側にスクロール バーを作成します。スクロール バーをスライドさせると要素内のすべてのコンテンツを表示できます。<br>inherit: オーバーフローの値を継承します。親要素の属性。 </div><divclass=auto>visible: デフォルト値。オーバーフローしたコンテンツは処理されず、コンテンツは要素コンテンツ領域の外側に表示されます。<br>hidden: オーバーフローした要素コンテンツ領域のコンテンツを非表示にします。<br> >スクロール: オーバーフロー要素のコンテンツ領域のコンテンツを非表示にし、要素の左側と下にスクロール バーを作成します。スクロール バーをスライドすると、要素内のすべてのコンテンツを表示できます。<br> auto: コンテンツのオーバーフローが発生した場合、要素の左側にスクロール バーを作成します。スクロール バーをスライドさせると要素内のすべてのコンテンツを表示できます。<br>inherit: オーバーフローの値を継承します。親要素の属性。 </div></body></html>実行結果:
