ホームページ > 記事 > ウェブフロントエンド > CSSでオーバーフロー非表示を設定する方法
CSS でオーバーフロー非表示を設定する方法: 最初に HTML サンプル ファイルを作成し、次に本文に p タグのコンテンツを定義し、最後に「overflow:hidden」属性を通じてオーバーフロー非表示を設定します。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター
CSS では、overflow 属性とオーバーフローの非表示を設定するには、overflow:hidden を使用します。
オーバーフロー属性
オーバーフロー属性は、コンテンツが要素ボックスからオーバーフローした場合に何が起こるかを指定します。
この属性は、要素のコンテンツ領域をオーバーフローするコンテンツがどのように処理されるかを定義します。値がスクロールの場合、ユーザー エージェントは、必要かどうかに関係なく、スクロール メカニズムを提供します。したがって、すべてが要素ボックス内に収まる場合でも、スクロールバーが表示される可能性があります。
注: すべての主要なブラウザはオーバーフロー属性をサポートしています。
可能な値
visible: デフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。
hidden: コンテンツはトリミングされ、残りのコンテンツは非表示になります。
scroll: コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
auto: コンテンツがトリミングされると、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div { background-color: pink; width: 150px; height: 150px; overflow: hidden } </style> </head> <body> <p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p> <div> 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。 默认值是 visible。 </div> </body> </html>
レンダリング:
推奨学習:「css ビデオ チュートリアル 」
以上がCSSでオーバーフロー非表示を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。