たとえば、一部のニュース Web サイトでは、より多くのテキストを表示したい場合は、下にスライドし続ける必要があります。ブラウザの右側には、この記事で説明する要素であるスクロール バーが常にあります。Web ページでは、1 ページにすべてのデータを収容できない場合、オーバーフローを使用して設定することがよくあります。
overflow 属性の役割は、コンテンツが要素ボックスからオーバーフローしたときに何が起こるかを指定し、要素のコンテンツ領域からオーバーフローしたコンテンツがどのように処理されるかを定義することです。
1.オーバーフロー
オーバーフローコンテンツをより適切に処理するために、CSS はオーバーフロー要素のコンテンツ領域のコンテンツを処理する方法を設定できる属性を提供します。この属性のオプションの値は次の表のとおりです。
例：
<!DOCTYPEhtml><html><head><style>div{width:550px;height:100px;margin-top:20px;border:1pxsolidred;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll ;}div.auto{オーバーフロー:au to;}</style></head><body><divclass=hidden>Web ページの設定は、多くの場合、1 ページで正確に満たされるわけではありません。詳細を表示するには、ブラウザの右側にスクロール バーが表示されます。これは、この記事で説明されている要素です。 1 ページにすべてのデータを収容できない場合は、オーバーフロー設定を使用することがよくあります。 overflow 属性の役割は、コンテンツが要素ボックスからオーバーフローしたときに何が起こるかを指定し、要素のコンテンツ領域からオーバーフローしたコンテンツがどのように処理されるかを定義することです。 <div> スライドすると、ブラウザの右側に常にスクロール バーが表示されます。これは、この記事で説明した要素です。Web ページでは、1 つのページにすべてのデータを収容できない場合、オーバーフローを使用して設定することがよくあります。 overflow 属性の役割は、コンテンツが要素ボックスからオーバーフローしたときに何が起こるかを指定し、要素のコンテンツ領域からオーバーフローしたコンテンツがどのように処理されるかを定義することです。 <div> スライドすると、ブラウザの右側に常にスクロール バーが表示されます。これは、この記事で説明した要素です。Web ページでは、1 つのページにすべてのデータを収容できない場合、オーバーフローを使用して設定することがよくあります。 overflow 属性の役割は、コンテンツが要素ボックスからオーバーフローしたときに何が起こるかを指定し、要素のコンテンツ領域からオーバーフローしたコンテンツがどのように処理されるかを定義することです。 </div></body></html>実行結果:
2.オーバーフロー-x、オーバーフロー-y
CSS3 には、overflow-x と overflow-y という 2 つの属性も用意されており、その機能は overflow 属性と同じです。
overflow-x: 要素のコンテンツ領域のコンテンツが要素から水平方向にオーバーフローした場合のオーバーフロー コンテンツの処理方法を設定します。
overflow-y: 要素のコンテンツ領域のコンテンツが要素から縦方向にはみ出した場合のオーバーフローコンテンツの処理方法を設定します。
3. オーバーフローの魔法の使い方
最初の使用法: 利益率トップの納品問題を解決する
マージントップの転送の問題: 子要素のマージントップは親要素を一緒にダウンさせます。これは、親要素に overflow:hidden を追加することで解決できます。
2 番目の使用法: フローティングの影響をクリアする - 親要素の高さが崩れる
万能な除去方法
オーバーフロー:非表示
クリア：両方
3 番目の使用法: アニメーションの表示と非表示 - 非表示を超えた
4 番目の使用法: 単一行のテキストが省略を超えています
例：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>dotcpp プログラミング</title><styletype=text/css>#{margin:0px;padding:0px;}セクション{width:800px;高さ:460px;余白in:auto;}article{float:left;width:200px;height:460px;overflow:hidden;}h3{font-size:16px;font-weight:bold;margin:10px50px;}p{margin:10px50px;} .chapter_1 {背景色:#A3A3A3;}.chapter_2{背景色:#81559d;}.chapter_3{背景色:#54709d;}.chapter_4{背景色:#4f9d89;}セクション:ホバー>article{overflow:hidden;width:50px;}section>article:hover{width:650px;}</style></head><body><section><articleclass=chapter_1><h3>ボリューム 1</ h3 ><p>C 言語の世界へようこそ! C 言語は強力で特殊なプログラミング言語であり、アマチュアおよびプロのプログラマーの間で人気があります。学習する前に理解して認識しましょう！ C言語の原型はA言語（ALGOL60言語）です。 </p></article><articleclass=chapter_2><h3>第 2 巻</h3><p>C 言語の世界へようこそ! C 言語は強力で特殊なプログラミング言語であり、アマチュアおよびプロのプログラマーの間で人気があります。学習する前に理解して認識しましょう！ C言語の原型はA言語（ALGOL60言語）です。 </p></article><articleclass=chapter_3><h3>第 3 巻</h3><p>C 言語の世界へようこそ! C 言語は強力で特殊なプログラミング言語であり、アマチュアおよびプロのプログラマーの間で人気があります。学習する前に理解して認識しましょう！ C言語の原型はA言語（ALGOL60言語）です。 </p></article><articleclass=chapter_4><h3>第 4 巻</h3><p>C 言語の世界へようこそ! C 言語は強力で特殊なプログラミング言語であり、アマチュアおよびプロのプログラマーの間で人気があります。学習する前に理解して認識しましょう！ C言語の原型はA言語（ALGOL60言語）です。 </p></article></section></body></html>実行結果:
