CSSにおけるオーバーフローの役割

下次还敢
リリース: 2024-04-26 13:12:15
オリジナル
1160 人が閲覧しました

overflow 属性は、コンテナを超えた要素のコンテンツがどのように表示されるかを制御します。具体的な値は次のとおりです: 表示: オーバーフロー コンテンツを表示します 非表示: オーバーフロー コンテンツを非表示にします スクロール: スクロール バーを追加します 自動: ブラウザーは必要に応じてスクロール バーを追加します 初期: デフォルト値にリセットします 継承: 親要素の属性を継承します

CSS のロールの

CSSにおけるオーバーフローの役割

overflow

overflow プロパティは、コンテナの境界を超える要素のコンテンツをブラウザがどのように処理するかを制御します。コンテンツがオーバーフローしたときに要素を表示するか、非表示にするか、またはスクロールするかを決定します。

基本構文:

<code class="css">overflow: [value];</code>
ログイン後にコピー

[値] には次の値を指定できます:

1. 表示: クリッピングを適用せずにオーバーフロー コンテンツを表示します。

2. hidden: 要素の境界線内にコンテンツが表示されないように、オーバーフローしたコンテンツを非表示にします。

3. スクロール: スクロール バーを追加して、ユーザーがスクロールしてあふれたコンテンツを表示できるようにします。

4. 自動: ブラウザは必要に応じてスクロール バーを自動的に追加します。

5. 初期値: オーバーフロー プロパティをブラウザのデフォルト値 (通常は表示されます) にリセットします。

6. 継承: 親要素からオーバーフロー属性を継承します。

例:

<code class="css">.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

.content {
  width: 300px;
  height: 200px;
}</code>
ログイン後にコピー

この例では、コンテナのオーバーフロー プロパティが hidden に設定されています。これは、コンテナの境界を超える .content コンテンツが非表示になることを意味します。

追加プロパティ:

overflow プロパティは、オーバーフロー動作を制御するために他の CSS プロパティとも使用されます:

  • overflow-x: 水平オーバーフロー (オーバーフローの略) のみを制御します。
  • overflow-y: 垂直オーバーフロー (オーバーフローの略) のみを制御します。
  • overflow-wrap: 要素内のテキストをどのように折り返すかを制御します。

以上がCSSにおけるオーバーフローの役割の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート