CSSオーバーフロー

タグ内のテキストが要素に収まらない場合、テキストは要素のボックスの外側にレンダリングされるようにコードに指示するプロパティ。ご覧のとおり、これによりテキストがoverflowingされています。 箱の外。

オーバーフローの可視値は便利ですが、オーバーフロープロパティの他の値ほど適切ではない場合があります。これは、ほとんどの場合、要素のコンテンツがオーバーフローしたくないためです。オーバーフローしたコンテンツは、Webページ用に作成した他のスタイルに干渉する可能性があるためです。

スクロールオーバーフロー

スクロール値を使用すると、Web要素のオーバーフローしたコンテンツをクリップできます。次に、スクロールバーが要素に追加され、ユーザーがオーバーフローしたコンテンツを確認できるようになります。

スクロールオーバーフロー値は、これらのスクロールバーのいずれかが必要ない場合でも、Web要素に垂直スクロールバーと水平スクロールバーの両方を追加します。

ボックスを設計していて、オーバーフローしたテキストをボックス内に残したいとします。オーバーフローしたテキストが存在する場合は、ユーザーがボックス内を移動できるようにスクロールバーが表示されます。

ボックスの設計に使用できるコードは次のとおりです。

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "scroll".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: scroll;
}

私たちのコードは次を返します：

[Code result here]


このコードでは、幅200ピクセル、高さ100ピクセルのボックスを作成しました。私たちの箱は明るい灰色の背景色をしています。

さらに、overflowプロパティを「scroll」と等しくなるように設定します。ご覧のとおり、テキストが多すぎてボックスに収まらないため、スクロールバーが表示され、オーバーフローしたテキストはボックスの境界内に残ります。

自動オーバーフロー

前のセクションで、scrollプロパティは、これらのスクロールバーのいずれかが不要な場合でも、Web要素に水平スクロールバーと垂直スクロールバーの両方を追加することを説明しました。

これは多くの場合に役立ちますが、Web要素を設計するときは、関連するスクロールバーのみを表示したい場合があります。これを行うには、自動値を使用できます。

自動値はスクロール値と同じように機能しますが、必要な場合にのみWeb要素にスクロールバーを追加します。テキストのボックスがあり、必要な場合にのみボックスにスクロールバーを追加したいとします。このコードを使用してこれを行うことができます。

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "auto".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: auto;
}

私たちのコードは次を返します：

[Code result here]


上記の例では、背景が明るい灰色の幅200ピクセル、高さ100ピクセルのボックスを作成しました。次に、オーバーフロープロパティの値をautoに設定します。ご覧のとおり、最終結果では1つのスクロールバーのみが表示されています。これは、テキストボックスにオーバーフローしたコンテンツを表示するために必要なスクロールバーが1つだけであるためです。

隠れたオーバーフロー

要素内のオーバーフローしたコンテンツをクリップして、ユーザーから非表示にすることを決定できます。これは、非表示のオーバーフロー値を使用して実現されます。

要素の外にオーバーフローした場合に内容を非表示にするテキストのボックスがあるとします。次のコードを使用して、このボックスを作成できます。

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "hidden".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: hidden;
}

私たちのコードは次を返します：

[Code result here]


前の例とは異なり、ボックスからオーバーフローしたテキストはユーザーから隠されています。これは、オーバーフロープロパティの値をhiddenに設定したためです。 私たちのコードで。

オーバーフロー-xおよびオーバーフロー-y

overlay-xプロパティとoverflow-yプロパティを使用すると、コンテンツのオーバーフローを各軸で個別に処理する方法を変更できます。

overlay-xプロパティは、ボックスの左端と右端のオーバーフローを処理する方法を指定し、overflow-yプロパティは、ボックスの上端と下端のオーバーフローを処理する方法を指定します。

ボックスを設計していて、x軸とy軸に2つの異なるオーバーフロー値を設定するとします。 x軸はhiddenを使用する必要があります オーバーフロー値。y軸はscrollを使用する必要があります オーバーフロー値。次のコードを使用して、このタスクを実行できます。

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS x-overflow and y-overflow properties to set overflow values for the individual axes in a web element.</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow-x: hidden;
	overflow-y: vertical;
}

私たちのコードは次を返します：

[Code result here]


ご覧のとおり、ボックスには水平スクロールバーがありません。これは、overflow-xの値を「hidden」に設定したためです。ただし、ボックスには垂直スクロールバーがあります。これは、overflow-yの値を「scroll」に設定したために表示されます。

結論

CSSオーバーフロープロパティは、要素のコンテンツが大きすぎてWebページの割り当てられた領域に収まらない場合に、要素のコンテンツがどのように表示されるかを指定します。

このチュートリアルでは、いくつかの例を参照して、CSSオーバーフロープロパティとその4つの値を使用してWeb要素のオーバーフローを制御する方法について説明しました。これで、エキスパート開発者のようにCSSオーバーフロープロパティの使用を開始する準備が整いました。